[英]How can I center the second list item element?
I am trying to learn how to do the swiping menu using css / scss
from an image I found online Movies by Artem Borodynya 我正在尝试从我在网上找到的图像(Artem Borodynya)中的图像学习如何使用
css / scss
进行滑动菜单
So far I have managed to have: 到目前为止,我设法做到了:
<ul class="navbar">
<li>Menu</li>
<li class="selected">Actualities</li>
<li>Substitutions</li>
<li>Canteen</li>
<li>Calendar</li>
<li>Files</li>
</ul>
Using some display: flex magic I have managed to get it roughly centered, but not perfectly. 使用一些显示:flex magic我设法使其大致居中,但并非完美。
The question is, how should I do the menu correctly? 问题是,我应该如何正确执行菜单? Is flex the right thing to use?
flex是正确使用的东西吗? How can I center the second li element and have others float around it?
如何使第二个li元素居中并使其他元素浮动?
I am using this as an experiment and I would like to learn how it should work. 我将其用作实验,我想学习它应该如何工作。
EDIT: 编辑:
my css: 我的CSS:
.navbar {
@include flexbox();
flex-flow: row nowrap;
align-items: flex-end;
padding: 0;
margin: 0;
li {
list-style: none;
font-family: 'Roboto Black', sans-serif;
padding-right: 3rem;
&.selected {
font-size: 3em;
color: #798AC5;
}
&:not(.selected) {
font-size: 2em;
color: #D9D9DA;
}
}
}
It's hard to answer your question without posted CSS. 没有发布CSS很难回答您的问题。 Here is something I have created:
这是我创建的:
<ul class="navbar">
<li>Menu</li>
<li class="selected">Actualities</li>
<li>Substitutions</li>
<li>Canteen</li>
<li>Calendar</li>
<li>Files</li>
</ul>
<style>
ul {
display: flex;
justify-content: center;
list-style: none; /* Remove browser defaults */
padding-left: 0; /* Remove browser defaults */
}
ul.navbar li:not(:last-of-type) {
margin-right: 10px;
}
li.selected {
background-color: rgb(204, 255, 0);
}
</style>
Test it here: https://jsfiddle.net/jwde4ufa/1/ 在这里测试: https : //jsfiddle.net/jwde4ufa/1/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.