將邊框分隔添加到具有柔性盒的li元素

每當我將flexbox拉伸或寬度100％應用於li項目時，它們將被推送到頁面左側的柔性開始位置而不是居中。將邊框分隔添加到具有柔性盒的li元素

body { 
 
    margin: 0; 
 
} 
 
ul, 
 
li, 
 
a { 
 
    text-decoration: none; 
 
    list-style-type: none; 
 
    padding: 0; 
 
} 
 
.site-wrapper { 
 
    min-height: 100vh; 
 
} 
 
.main-header, 
 
.main-nav { 
 
    display: flex; 
 
} 
 
.main-nav { 
 
    flex-direction: column; 
 
    align-items: center; 
 
    justify-content: space-between; 
 
    width: 100%; 
 
    margin: 0; 
 
} 
 
.main-nav li { 
 
    margin-bottom: 5%; 
 
} 
 
.mobile-nav-wrapper { 
 
    display: flex; 
 
    flex-direction: row; 
 
    justify-content: space-between; 
 
} 
 
.toggle-mobile-nav { 
 
    border: 1px solid black; 
 
    height: 30px; 
 
    width: 30px; 
 
    align-self: center; 
 
    margin-right: 2.5%; 
 
    border-radius: 10%; 
 
    padding: 1%; 
 
} 
 
.toggle-mobile-nav:hover { 
 
    cursor: pointer; 
 
} 
 
#logo { 
 
    margin-left: 20%; 
 
    cursor: pointer; 
 
} 
 
.fa-lg { 
 
    margin-top: .15em; 
 
    font-size: 1.9em; 
 
    margin-left: .05em; 
 
} 
 
.intro { 
 
    display: flex; 
 
    flex-direction: column; 
 
    padding-left: 2.5%; 
 
    padding-right: 2.5%; 
 
    align-items: center; 
 
    background-color: #38A5DB; 
 
} 
 
.intro h1 { 
 
    padding-top: 10%; 
 
} 
 
.intro h3 { 
 
    padding-bottom: 5%; 
 
} 
 
.intro-image { 
 
    max-width: 100%; 
 
}

<div class="site-wrapper"> 
 
    <div class="mobile-nav-wrapper"> 
 
    <li> 
 
     <h1 id='logo'>JP</h1> 
 
    </li> 
 
    <div class="toggle-mobile-nav"> 
 
     <i class="fa fa-bars fa-lg"></i> 
 
    </div> 
 
    </div> 
 
    <header class="main-header"> 
 
    <!-- Main Header Start --> 
 

 
    <ul class="main-nav"> 
 
     <li><a href="#">About Me</a> 
 
     </li> 
 
     <li><a href="#">My Work</a> 
 
     </li> 
 
     <li><a href="#">Playground</a> 
 
     </li> 
 
     <li><a href="#">Contact Me</a> 
 
     </li> 
 
    </ul> 
 
    </header> 
 
    <!-- Main Header end -->

來源

2016-03-06 Jesse Parrott

我離開了這是使用堆棧溢出我第一次一些CSS。我確實應用了它，因爲我需要某些Flexbox功能，但是我無法將其設置爲使得li將跨越容器的整個寬度並使文本居中在頁面上。但我會去驗證它 –

你的HTML無效，'li'只能是'ul/ol'的孩子（以及唯一的孩子）。嘗試確保一切。 –

的align-items:center導致該li收縮包裹，而不是拉伸（這是默認值）。

因此刪除它並在li上使用text-align:center。

ul, 
 
li, 
 
a { 
 
    text-decoration: none; 
 
    list-style-type: none; 
 
    padding: 0; 
 
} 
 
.main-header, 
 
.main-nav { 
 
    display: flex; 
 
} 
 
.main-nav { 
 
    flex-direction: column; 
 
    justify-content: space-between; 
 
    width: 100%; 
 
} 
 
.main-nav li { 
 
    margin-bottom: 5%; 
 
    background: lightgreen; 
 
    text-align: center; 
 
} 
 
.main-nav li a { 
 
    display: block; 
 
}

<ul class="main-nav"> 
 
    <li><a href="#">About Me</a> 
 
    </li> 
 
    <li><a href="#">My Work</a> 
 
    </li> 
 
    <li><a href="#">Playground</a> 
 
    </li> 
 
    <li><a href="#">Contact Me</a> 
 
    </li> 
 
</ul>

來源

2016-03-06 18:16:41

將邊框分隔添加到具有柔性盒的li元素

回答

相關問題