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

您可以尝试“表格布局：固定”

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

Answer 2

您的图像较大，因此遇到问题。 将最大宽度设置为图像：

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; display: inline-block; overflow: hidden; 您li而不是使用display: table-cell; 给li

演示

Answer 4

不确定您要达到的目标，但是这个小提琴又如何呢？

ul{}

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

修改后的CSS和CSS ，添加了height属性。 小提琴2.0

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

Answer 5

您要使图像宽50像素吗？ 在这种情况下，您只需要添加以下代码：

ul li img{
    width: 50px;
}

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

Answer 6

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

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

它将所有li项目的height s保持为匹配边界高度所需的（并且是动态的）。 它还将所有li项目保持50px宽，除非它们的内容超过50px （如您的图像）。

（除Chrome浏览器外，我尚未在其他任何浏览器中对此进行测试）