CSS显示表忽略宽度

Question

我有多个li项左边浮动，我想在它们周围设置一个右边框，这样所有它们都可以获得相同的边框高度。因此我使用display:table;然而它忽略了li的宽度。如何强制对所有li项使用相同的宽度？

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/

Answer 1

您可以尝试“table-layout：fixed”

https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout

Answer 2

您的图片更大，因此您遇到了问题。将max-width设置为image：

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

也可以在li上使用分词，

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

Answer 3

您还需要定义img标签的宽度，因为img标签占据全宽，因此您可以将图像宽度设置为50px，但更好的方法是将宽度定义为100％。

如果您不想在li标记内指定任何内容，则可以将display: inline-block; overflow: hidden;设置为li，而不是使用display: table-cell;至li

demo

Answer 4

不确定你想要实现的是什么，但是这个fiddle

呢

ul{}

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

EDITED FIDDLE AND CSS ，添加了height属性。 fiddle 2.0

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

Answer 5

你想让图像宽50px吗？在这种情况下，您只需添加这段代码：

ul li img{
    width: 50px;
}

http://jsfiddle.net/xbmEQ/3/

Answer 6

您可以设置min-width项的li，使其不会缩小到50px以下。

http://jsfiddle.net/xbmEQ/5/

它会保留所有匹配（和动态）height项的li个匹配边框高度。它还会保留所有li项50px的宽度，除非其内容超过50px（与您的图像一样）。

（我没有在除浏览器之外的任何其他浏览器中对此进行测试）