不要根据旁边的元素拉伸元素的高度

Question

所以我有这个列表，里面有浮动列表项，宽度等于 50%。它们都是动态生成的，有些 li 的高度比 wrest 高，而它旁边的 li 延伸到那个高度，看起来有点奇怪。我不想让它伸展。这是我的代码：

HTML

<ul>
    <li>
        <span>Some label</span>
        Some text
    </li>
    <li>
        <span>Some label</span>
        Some text
        <ul>
            <li><strong>More options</strong></li>
            <li>Option 1</li>
            <li>Option 2</li>
            <li>Option 3 </li>
        </ul>
    </li>
    <li>
        <span>Some label</span>
        Some text
    </li>
    <li>
        <span>Some label</span>
        Some text
    </li>
</ul>

CSS

ul > li {
    float: left;
    width: 50%;
}

ul > li li {
    width: 100%;
    float: none;
}

JSFiddle -> https://jsfiddle.net/y160n4hg/

Answer 1

看看这个修改后的版本：https://jsfiddle.net/scarl3tt/y160n4hg/1/

我添加这段代码是为了证明列表项实际上并没有伸展——它们只是向下浮动。

ul > li {
    ...
    background: red;
}

Float 不会自动将事物推到尽可能高的位置。有 javascript 库可以为您压缩这样的内容，尽管它们非常恶心。 Masonry 是比较流行的一种。

Answer 2

试试这个

HTML

<ul>
    <li><span>Some Label 1-1</span> Some text</li>
    <li><span>Some Label 1-2</span> Some text</li>
</ul>

<ul>
    <li> <span>Some Label 2-1</span> Some text
        <br> <strong>More Options</strong>

        <ul>
            <li>Some More Text</li>
        </ul>
    </li>
    <li><span>Some Label 2-2</span> Some text</li>
</ul>

CSS

ul {    
    float:left;
}
li ul {
    float:none;
}

Fiddle Demo

Answer 3

这样试试：Demo

CSS:

#container {
    -webkit-column-count: 2;
    -webkit-column-gap: 0;
    -webkit-column-fill: auto;
    -moz-column-count: 2;
    -moz-column-gap: 0;
    /*  -moz-column-fill: auto;*/
    column-count: 2;
    column-gap: 0;
    column-fill: auto;
}
ul.one {
    list-style: none;
    margin:0;
    padding:0;
}
ul.one >li {  
    background:green;
    display:inline-block;
    width:100%;
    vertical-align:top;
}
ul.one li li {
    width: 100%;
    float: none;
    background:yellow;
}

ul.one li > ul >li {
    color: red;
    width: 100%;
    float: none;
}

HTML:

<div id="container"> <ul class="one">..</ul></div>

Answer 4

您可以为 LI 元素设置 max-height 并设置 overflow auto 以获得滚动条来滚动值。

ul > li {
    float: left;
    width: 50%;
    max-height: 70px;
    overflow: auto;
}

ul > li li {
    width: 100%;
    float: none;
}

<ul>
    <li>
        <span>Some label</span>
        Some text
    </li>
    <li>
        <span>Some label</span>
        Some text
        <ul>
            <li><strong>More options</strong></li>
            <li>Option 1</li>
            <li>Option 2</li>
            <li>Option 3 </li>
        </ul>
    </li>
    <li>
        <span>Some label</span>
        Some text
    </li>
    <li>
        <span>Some label</span>
        Some text
    </li>
</ul>

https://jsfiddle.net/y160n4hg/3/

不要根据旁边的元素拉伸元素的高度

Don't stretch element's height based on the one next to it

html

css

height

width