[英]How can I center the second list item element?
我正在嘗試從我在網上找到的圖像(Artem Borodynya)中的圖像學習如何使用css / scss
進行滑動菜單
到目前為止,我設法做到了:
<ul class="navbar">
<li>Menu</li>
<li class="selected">Actualities</li>
<li>Substitutions</li>
<li>Canteen</li>
<li>Calendar</li>
<li>Files</li>
</ul>
使用一些顯示:flex magic我設法使其大致居中,但並非完美。
問題是,我應該如何正確執行菜單? flex是正確使用的東西嗎? 如何使第二個li元素居中並使其他元素浮動?
我將其用作實驗,我想學習它應該如何工作。
編輯:
我的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;
}
}
}
沒有發布CSS很難回答您的問題。 這是我創建的:
<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>
在這里測試: https : //jsfiddle.net/jwde4ufa/1/
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.