css -如何在水平<ul>中定位<li>？
css -如何在水平<ul>中定位<li>？
提问于 2018-06-06 05:07:02
我有section，它包含水平ul，它包含四个li，如下所示：
#header-strip ul {
display: flex;
justify-content: space-between;
margin: 0;
padding: 0;
height: 4vh;
width: 100%;
background-color: grey;
list-style-type: none;
}
#header-strip li {
display: inline;
}<section id="header-strip">
<ul>
<li>meant to be left</li
><li>meant to be centered</li
><li>meant to be just before last</li
><li>meant to be right</li
>
</ul>
</section>
要求：
- 左侧的第一个项目，屏幕边缘有较小的百分比偏移
- 第二个项目居中在中间
- 第三个项目在右侧，与右侧的fourth
- fourth项目之间有一些百分比空间，与屏幕边缘
的百分比偏移
我可以用基本的justify-content: space-between;来定位li，但不知道如何以自定义的方式定位它。
它应该看起来像这样：
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-06-06 05:10:14
只需更改第二个元素的页边距并将其设置为auto
顺便说一句:使用flexbox，您不需要担心空白，也不需要将元素定义为inline
#header-strip ul {
display: flex;
margin: 0;
padding: 0;
color:#ffff;
width: 100%;
background-color: grey;
list-style-type: none;
}
#header-strip li {
margin:0 2%;
}
#header-strip li:nth-child(2) {
margin: auto;
}<section id="header-strip">
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>
</section>
Stack Overflow用户
发布于 2018-06-06 05:20:18
如果您使用的是flexbox：
<section id="header-strip">
<ul>
<li>meant to be left</li
><li class="fill">meant to be centered</li
><li>meant to be just before last</li
><li>meant to be right</li
>
</ul>
</section>//css
.fill {
flex-grow: 2;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50708939
复制相关文章
相似问题