浮动列表项中的奇怪空格 div

Question

我有一个无序列表，里面有两个浮动的 div。左边一个，右边一个。在 Chrome 中，我在顶部看到了空格。在 IE 中一切似乎都很好。如何去掉这个空格？

风格：

ul {
    margin: 1em;
}

li {
    width: 100%;
    padding: 0;
    margin: 0.5em;
    border: 1px black solid;
}

.clear {
    clear: both;
}

.left-item {
    float: left;
    background-color: red;
    padding: 1em;
}

.right-item {
    float: right;
    background-color: blue;
    padding: 1em;    
}

HTML代码：

<ul>
    <li>
        <div class="left-item">Item 1</div>
        <div class="right-item">Item 2</div>
        <div class="clear"></div>
    </li>
    <li>
        <div class="left-item">Item 1</div>
        <div class="right-item">Item 2</div>
        <div class="clear"></div>
    </li>
    <li>
        <div class="left-item">Item 1</div>
        <div class="right-item">Item 2</div>
        <div class="clear"></div>
    </li>
</ul>

示例 fiddle：http://jsfiddle.net/38fdyvu6/1/

我在 Chrome 中看到的内容：

在 IE 中：

我知道我可以将 li 设置为 display: block。但我确实需要用作 expand/collapse 指标的项目符号。

Answer 1

如果你可以在 li 中添加一个 div 元素，那么试试这个 fiddle

把这个class.my-con加到中间的容器里就行了

html:

<li>
    <div class="my-con">
        <div class="left-item">Item 1</div>
        <div class="right-item">Item 2</div>
        <div class="clear"></div>
    </div>
</li>

css:

.my-con{
    width: 100%;
    display: inline-block;
    vertical-align: middle;
}

Answer 2

不知道你是如何实现的：

"But I really need bullets which I use as expand/collapse indicators."

很难准确，但也许可以使用伪元素代替。

ul {
    margin: 1em;
}

li {
    width: 100%;
    padding: 0;
    margin: 0.5em;
    border: 1px black solid;
    position: relative;
    list-style-type: none;
}

li:before {
 content: "22";
    font-size:1.5em;
    position: absolute;
    left: 0;
    top:0;
    margin-left: -1em;
}

.clear {
    clear: both;
}

.left-item {
    float: left;
    background-color: red;
    padding: 1em;
}

.right-item {
    float: right;
    background-color: blue;
    padding: 1em;    
}

<ul>
    <li>
        <div class="left-item">Item 1</div>
        <div class="right-item">Item 2</div>
        <div class="clear"></div>
    </li>
    <li>
        <div class="left-item">Item 1</div>
        <div class="right-item">Item 2</div>
        <div class="clear"></div>
    </li>
    <li>
        <div class="left-item">Item 1</div>
        <div class="right-item">Item 2</div>
        <div class="clear"></div>
    </li>
</ul>

浮动列表项中的奇怪空格 div

Strange whitespace in list item with floating div

html

css

html-lists

css-float