有什麼辦法讓這些跨度元素垂直對齊？

我正在使用跨度的JQuery Sortable控件，現在我無法獲取垂直對齊的元素。通常情況下，使用Div的，我只是添加填充。在這種情況下，雖然圖像居中，但文字太低，需要碰撞幾個像素。有什麼辦法讓這些跨度元素垂直對齊？

  @foreach(var c in companies) 
      { 
       var company = c.Company; 
       <li class="ui-state-default"> 
        <span> 
        <img src="..\..\Content\img\udarrow.png"/> 
        </span> 
        <span> 
        @company 
        </span> 
       </li> 
      }

有沒有辦法做到這一點？

來源

2012-07-12 Dave

您不需要使用span來使用可排序。事實上，你甚至不需要使用李。它在語義上是正確的（因爲你可能正在對事物清單進行排序），但沒有必要。請參閱http://jsfiddle.net/4eHuy/ – solidau 2012-07-12 00:22:17

好的，我會研究這一點，並牢記它，我會糾正我的帖子。謝謝。 – Dave 2012-07-12 00:33:05

在CSS：

.ui-state-default span { 
    display: block; 
}

來源

2012-07-12 00:15:29 Ruel

我提高了你的答案，但它似乎不適用於我的情況。元素變成堆疊，如果我使用float：left;寬度：100px，Sortable控件會失控。對不起，我想這也是一個可排序的控制問題。 – Dave 2012-07-12 00:20:07

'float：left;'將使元素相互浮動，即使它們被設置爲'block'。你可以截取你需要的輸出嗎？ – Ruel 2012-07-12 00:23:08

嗯，它非常醜陋，但是當我將文本放入一個浮動文件中時，卻能夠正常工作，但將圖像單獨留下。由於某種原因，這是可以的。現在這一切都很好。 – Dave 2012-07-12 00:26:36

嘗試轉換您的跨度，以塊元素。

.ui-state-default span { display: block; }

來源

2012-07-12 00:16:07 wdm

我寧願讓他們inline-block不僅僅是block如果他們必須相互直列布置。然後只需撥動邊距&填充。

來源

2012-07-12 00:18:50

行內塊導致與塊相同的問題。我想我應該提到Sortable控件干擾了我想做的事情。 – Dave 2012-07-12 00:22:18

有什麼辦法讓這些跨度元素垂直對齊？

回答

相關問題