Question

我有<ul> <li>，我需要使用display: inline-block;。这是为了“浮动”li的必要条件，而最后一个元素是它的父容器的100％宽，并且可能有任何数量的li（浮动意味着li的数量是有限的，取决于它的包含元素的宽度）。因此<ul>的总宽度将大于视口的宽度。

这很好，除了我要求“浮动”元素到多线，我希望所有非多线的元素都是<ul>的100％高度。

我可以通过在JS中设置<ul>的高度来实现我想要的效果，但这是我真的不想做的事情。

这是一个JS小提琴。 http://jsfiddle.net/d5WBv/3/

有没有人有解决方案。我不确定flexbox或display: table;是否可以解决这个问题，但我似乎无法解决这个问题....

谢谢！

Answer 1

我想，你的意思是李的全部都应该有相同的高度？

如果是这样，您可以将它们显示为表格单元格：

ul {
    display: table;
    width: 100%;
}

li {
    vertical-align: top;
    display: table-cell;
    padding: 10px;
    margin: 0;
}

另外，请检查updated fiddle。

Answer 2

我有一个CSS解决方案，请查看此Working Fiddle

DownSide：它需要加倍ul li元素，（其中一个是用于获取文档流中的真实空间，（他不按我们想要的方式渲染，但将被隐藏），并且其中一个在另一个上面显示您想要的显示。

<强> HTML：

<div class="Container">
    <ul class="Hidden">
        <li>This stays on one line</li>
        <li>And this</li>
        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor libero neque, nec tristique metus rutrum et. Integer semper libero quis magna placerat, a posuere sem congue.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor libero neque, nec tristique metus rutrum et. Integer semper libero quis magna placerat, a posuere sem congue.</li>
    </ul>
    <ul class="Visible">
        <li>This stays on one line</li>
        <li>And this</li>
        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor libero neque, nec tristique metus rutrum et. Integer semper libero quis magna placerat, a posuere sem congue.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor libero neque, nec tristique metus rutrum et. Integer semper libero quis magna placerat, a posuere sem congue.</li>
    </ul>
</div>

<强> CSS：

*
{
    padding: 0;
    margin: 0;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.Container
{
    position: relative;
}

.Hidden
{
    visibility: hidden;
}

.Visible
{
    position: absolute;
    top: 0;
    height: 100%;
}

ul
{
    white-space: nowrap;
    background-color: #cccccc;
    font-size: 0;
}
li
{
    display: inline-block;
    padding: 10px;
    border-right: 1px solid red;
    background-color: #2c2c2c;
    text-align: center;
    color: #fefefe;
    white-space: normal;
    vertical-align: top;
    font-size: 16px;
    height: 100%;
}

li:last-child
{
    width: 100%;
    border-right: 1px solid #2b2b2b;
}

显示：内联块和100％高度实现'浮动'

2 个答案: