带有浮动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>

样本小提琴:http://jsfiddle.net/38fdyvu6/1/

我在Chrome中看到的内容:

在IE中:

我知道我可以li参加display: block.但我真的需要用作扩展/折叠指示器的子弹.

Answer 1

如果你可以添加一个div元素li然后尝试这个小提琴

只需将此类添加.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;
}