FLoated元素顶部对齐

Question

我需要在左边放置每个奇数元素，在右边放置每个偶数元素，如下图所示。

请检查我到目前为止所做的事情。 https://jsfiddle.net/afelixj/na4fwkg7/

如何删除第三个绿色项目上方和下方的额外空间？

这是代码

＆＃13;

＆＃13;

*{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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

尝试

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

你改变了这种变化 - https://jsfiddle.net/e5p15160/

Answer 2

检查这是否适合你，我在li中为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>