CSS顯示錶忽略寬度

我有多個li項目向左浮動，我想在它們周圍設置一個正確的邊框，以便所有邊框均獲得相同的高度。因此，我使用display:table;但它忽略了li的寬度。我如何強制所有li項目使用相同的寬度？CSS顯示錶忽略寬度

HTML：

<ul> 
    <li>a</li> 
    <li><img src="http://farm8.staticflickr.com/7437/9982948185_19ae813ee0_n.jpg"/></li> 
    <li>b</li>  
</ul>

CSS：

ul{ 
    display: table; 
} 

ul li{ 
    display: table-cell; 
    width: 50px !important; 
    border-right: 1px solid red; 
}

演示： http://jsfiddle.net/xbmEQ/

不是真正確定你想才達到什麼，但你看這個fiddle

ul{} 

ul li{ 
    display: inline-block; 
    width: 50px; 
    border: 1px solid red; 
    overflow:hidden; 
}

EDITED小提琴和CSS，增加height屬性。 fiddle 2.0

ul li{ 
    display: inline-block; 
    height:100px; 
    width: 50px; 
    border: 1px solid red; 
    overflow:hidden; 
}

2013-09-29 10:51:20 caramba

我使用的顯示錶，因爲我想有每個李（邊界）的高度相同。 – user2738640

@ user2738640沒有理由使用display：table; - > http://jsfiddle.net/xbmEQ/13/ – caramba

你想使圖像50像素寬？在這種情況下，你只需要添加的代碼，這片：

ul li img{ 
    width: 50px; 
}

2013-09-29 10:51:49

爲什麼「！重要」？ – caramba

重要的是沒有必要的，刪除它。 –

您可以設置li項目min-width，使他們不縮水下面50px。

它使height一切都在li項目匹配（動態），只要你想匹配邊界的高度。它也保留所有li項目50px寬，除非他們的內容超過50px（如您的圖像）。

2013-09-29 10:54:29 SombreErmine

您的圖片更大，所以你有問題（我沒有在任何其他瀏覽器不是Chrome測試這一點）。最大寬度設置爲圖像：

ul li img { 
    max-width:100%; 
}

也用李字破，

2013-09-29 10:55:54

圖像不是問題。這個想法是，如果我已經指定了li的寬度，它應該隱藏溢出的內容而不是增加寬度。 – user2738640

不是，它的方式不是

的作品。這些元素將自行擴展以包含其內容。這是桌子的美麗。使用word break可以將文本分解爲下一行，併爲圖像設置圖像最大高度意味着您更安全！ –

@ user2738640這是最好的答案。所以我認爲你應該接受這一點。 –

你可以試試「表格佈局：固定的」

2013-09-29 10:57:53 Sinan

您還需要定義img標籤的寬度，因爲img標籤採用了全寬因此，您可以將圖像寬度設置爲50px，但更好的方式來定義寬度1 00％。

如果你不想指定L1標籤裏的任何東西，那麼你可以設置display: inline-block; overflow: hidden;您li而不是使用display: table-cell;來li

2013-09-29 11:07:51

相關問題

回答