FLoated元素頂部對齊

Question

我需要將每個奇數元素放在左邊，並且每個偶數元素都放在右邊，就像下面的圖像一樣。

請檢查什麼我迄今所做的小提琴。 https://jsfiddle.net/afelixj/na4fwkg7/

如何刪除第三個綠色項目上方和下方的額外空間？

下面是代碼

*{box-sizing:border-box;} 
 
ul{ 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
li{ 
 
    list-style: none; 
 
    border: 2px solid red; 
 
    margin: 0 0 10px; 
 
    width: 50%; 
 
} 
 
li:nth-child(odd){ 
 
    float: left; 
 
    clear: left; 
 
} 
 
li:nth-child(even){ 
 
    border: 2px solid green; 
 
    float: right; 
 
    clear: right; 
 
}

<ul> 
 
    <li>test</li> 
 
    <li>Lorem ipsum dolor sit amet</li> 
 
    <li>, consectetur adipisicing elit. Reiciendis aliquid eos sint et autem optio? Optio </li> 
 
    <li>culpa, nisi, dolore maiores aut vel cum</li> 
 
    <li> totam non ab voluptatibus assumenda quasi, blanditiis?</li> 
 
    <li>test</li> 
 
    <li>Lorem ipsum dolor sit amet</li> 
 
    <li>, consectetur adipisicing elit. Reiciendis aliquid eos sint et autem optio? Optio </li> 
 
    <li>culpa, nisi, dolore maiores aut vel cum</li> 
 
    <li> totam non ab voluptatibus assumenda quasi, blanditiis?</li> 
 
    <li>test</li> 
 
    <li>Lorem ipsum dolor sit amet</li> 
 
    <li>, consectetur adipisicing elit. Reiciendis aliquid eos sint et autem optio? Optio </li> 
 
    <li>culpa, nisi, dolore maiores aut vel cum</li> 
 
    <li> totam non ab voluptatibus assumenda quasi, blanditiis?</li> 
 
</ul>

Answer 1

嘗試

li:nth-child(even){ 
    display: inline-block; 
} 

你撥弄着這種變化 - https://jsfiddle.net/e5p15160/

Answer 2

檢查這是否適合你，我添加位置a s相對於css：

<ul> 
<li>test</li> 
<li>Lorem ipsum dolor sit amet</li> 
<li>, consectetur adipisicing elit. Reiciendis aliquid eos sint et autem optio? Optio </li> 
<li>culpa, nisi, dolore maiores aut vel cum</li> 
<li> totam non ab voluptatibus assumenda quasi, blanditiis?</li> 
<li>test</li> 
<li>Lorem ipsum dolor sit amet</li> 
<li>, consectetur adipisicing elit. Reiciendis aliquid eos sint et autem optio? Optio </li> 
<li>culpa, nisi, dolore maiores aut vel cum</li> 
<li> totam non ab voluptatibus assumenda quasi, blanditiis?</li> 
<li>test</li> 
<li>Lorem ipsum dolor sit amet</li> 
<li>, consectetur adipisicing elit. Reiciendis aliquid eos sint et autem optio? Optio </li> 
<li>culpa, nisi, dolore maiores aut vel cum</li> 
<li> totam non ab voluptatibus assumenda quasi, blanditiis?</li> 
</ul> 
<style> 
*{box-sizing:border-box;} 
ul{ 
margin: 0; 
padding: 0; 
} 
li{ 
list-style: none; 
border: 2px solid red; 
margin: 0 0 10px; 
width: 50%; 
position:relative; 
} 

li:nth-child(odd){ 
float: left; 
clear: left; 
} 

li:nth-child(even){ 
border: 2px solid green; 
float: right; 
clear: right; 
} 
</style>