Khoảng trắng lạ trong mục danh sách có dấu phẩy động

Question

Tôi có danh sách không có thứ tự với hai div nổi trong đó. Một ở bên trái, một ở bên phải. Và trong Chrome, tôi thấy khoảng trắng ở trên cùng. Trong IE tất cả có vẻ tốt. Làm thế nào để thoát khỏi khoảng trắng này?

Styles:

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 code:

<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> 

mẫu fiddle: http://jsfiddle.net/38fdyvu6/1/

Những gì tôi nhìn thấy trong Chrome:

Và trong IE:

Tôi biết tôi có thể thiết lập li-display: block. Nhưng tôi thực sự cần đạn mà tôi sử dụng làm chỉ số mở rộng/thu gọn.

Answer 1

nếu bạn có thể thêm một yếu tố div bên li sau đó thử này fiddle

Chỉ cần thêm lớp này .my-con để container giữa

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

Nếu không biết bạn đang triển khai điều này như thế nào:

"Nhưng tôi thực sự cần dấu đầu dòng mà tôi sử dụng làm chỉ báo mở rộng/thu gọn".

Thật khó để chính xác nhưng có lẽ một phần tử giả có thể được sử dụng thay thế.

ul { 
 
    margin: 1em; 
 
} 
 

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

 
li:before { 
 
content: "\2022"; 
 
    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>