html - 不要根据旁边的元素拉伸(stretch)元素的高度

Question

所以我有这个列表，其中包含 float 列表项，宽度等于 50%。它们都是动态生成的，有些 li 的高度比 wrest 更大，而旁边的 li 则延伸到那个高度，看起来有点奇怪。而且我不想让它拉伸(stretch)。这是我的代码:

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

尝试这样: 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>