我怎样才能让li元素是在同一水平，如果数量或li元素是奇数

我想左丽elemts是在与右侧的人在同一水平，这里是代码：https://jsfiddle.net/v5m6cv1u/我怎样才能让li元素是在同一水平，如果数量或li元素是奇数

<div class="menu"> 
</p>Code too long<p> 
     </div>

来源

2017-05-10 Ursu Grizzly

你所说的 “在同一水平” 呢？ –

作为偶数，在这个例子中，第二个元素继续在右侧，我希望它只在左侧，所以第三个元素可以从顶部开始，它看起来不错。 –

第二个元素是什么？内容？如果是这样，你为什么如此沉重地填充它？ – Sagar

.menu h2 { 
 
    text-align: center; 
 
    font-size: 4vh; 
 
    text-transform: uppercase; 
 
} 
 

 
.menu h3 { 
 
    font-size: 3vh; 
 
    color: darkblue 
 
} 
 

 
.menu h4 { 
 
    padding: 0.2em 0em; 
 
} 
 

 
.menu .content { 
 
    padding: 3em 5em; 
 
} 
 

 
.ipsum { 
 
    list-style: none; 
 
    padding-bottom: 1em; 
 
    border-bottom: 1px solid #000000; 
 
} 
 

 
.menu p { 
 
    font-size: 1em; 
 
} 
 

 
.menu .vitae { 
 
    text-align: right; 
 
    color: brown 
 
} 
 

 
.meniu .vitae:after { 
 
    content: " VIT"; 
 
} 
 

 
.menu .magna { 
 
    text-align: right; 
 
    color: darkslateblue; 
 
    font-size: 1.2em; 
 
} 
 

 
.menu .magna:after { 
 
    content: " MAG"; 
 
} 
 

 
.menu ul { 
 
    columns: 2; 
 
    padding: 0; 
 
    margin: 0; 
 
    display: inline-block; 
 
    width: 100%; 
 
} 
 

 
.menu ul li { 
 
    display: inline-block; 
 
} 
 

 
.menu { 
 
    background-color: #FFFAE7; 
 
} 
 

 
.menu h1 { 
 
    color: #d00807; 
 
    font-size: 6em; 
 
    display: block; 
 
    text-align: center; 
 
    padding-top: 0.2em; 
 
    padding-bottom: 0.1em; 
 
    text-transform: uppercase; 
 
}

<div class="menu"> 
 
    <h1>Lorem ipsum</h1> 
 
    <h2>Lorem ipsum dolor sit amet, et denique molestiae sit. </h2> 
 
    <div class="content"> 
 
    <h3>Lorem</h3> 
 
    <ul> 
 
     <li class="ipsum dolor"> 
 
     <h4>Dolor</h4> 
 
     <p>Nullam consequat, sem vitae rhoncus tristique, mauris nulla fermentum est, bibendum ullamcorper sapien magna et quam.</p> 
 
     <div class="vitae">9.5</div> 
 
     <div class="magna">320</div> 
 
     </li> 
 
     <li class="ipsum sit"> 
 
     <h4>Sit</h4> 
 
     <p>Nullam consequat, sem vitae rhoncus tristique, mauris nulla fermentum est, bibendum ullamcorper sapien magna et quam.</p> 
 
     <div class="vitae">9.5</div> 
 
     <div class="magna">320</div> 
 
     </li> 
 
     <li class="ipsum amet"> 
 
     <h4>Amet</h4> 
 
     <p>Nullam consequat, sem vitae rhoncus tristique, mauris nulla fermentum est, bibendum ullamcorper sapien magna et quam.</p> 
 
     <div class="vitae">9.5</div> 
 
     <div class="magna">320</div> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</div>

来源

2017-05-10 12:52:42

谢谢你，它的作品。 –

你能告诉我你到底做了什么吗？:) –

看看.menu ul和.menu ul li，并找出问题的区别。祝你好运。 –

而不是使用在ul列，你可以使用这个CSS的li元素（它会导致不同的顺序，我不知道这是否对你没事做？）：

.menu ul li { 
    display: inline-block; 
    width: 45%; 
    box-sizing: border-box; 
    margin-right: 4%; 
}

https://jsfiddle.net/w6br9r69/2/

来源

2017-05-10 12:59:12 Johannes

简单的解决方案将是使元素inline-block的

.ipsum { 
    [...] 
    display: inline-block; 
}

来源

2017-05-10 13:08:29

绝对天才 –

我怎样才能让li元素是在同一水平，如果数量或li元素是奇数

回答

相关问题