列表超過父容器的寬度

Question

我想在包含三個項目的頭部中構建一個導航，其中前兩個項目左對齊，第三個項目右對齊。嘗試使用flexbox，但有一個arror：ul超過它的父容器的寬度。

header { 
 
    width: 100%; 
 
    background: #417690; 
 
    margin-left: 10px; 
 
    margin-right: 10px; 
 
    font-size: 20px; 
 
    height: 70px; 
 
} 
 

 
header ul { 
 
    height: 100%; 
 
    width: 100%; 
 
    display: flex; 
 
    flex-direction: row; 
 
    align-items: center; 
 
    /* justify-content: center; */ 
 
} 
 

 
header ul li { 
 
    display: inline-block; 
 
    padding-right: 15px; 
 
    margin-left: 10px; 
 
} 
 

 
.filler { 
 
    flex-grow: 1; 
 
}

<header> 
 
    <ul> 
 
    <li><a href="#">Logo</a></li> 
 
    <li><a href="#">New article</a></li> 
 
    <li class="filler"></li> 
 
    <li><a href="#">username</a></li> 
 
    </ul> 
 
</header>

我該如何解決這個問題？ 在FF和Opera測試。

Answer 1

試試這個：

header ul { 
    box-sizing: border-box; 
    padding: 0; 
} 

Answer 2

重置margin爲零，並添加box-sizing: border-box所有元素，包括在大小計算的padding。您還可以重置padding爲ul元素 - 見下面的演示：

* { /* ADDED */ 
 
    box-sizing: border-box; 
 
} 
 

 
header { 
 
    width: 100%; 
 
    background: #417690; 
 
    /*margin-left: 10px; 
 
    margin-right: 10px;*/ 
 
    font-size: 20px; 
 
    height: 70px; 
 
} 
 

 
header ul { 
 
    height: 100%; 
 
    width: 100%; 
 
    display: flex; 
 
    flex-direction: row; 
 
    align-items: center; 
 
    /* justify-content: center; */ 
 
    padding: 0; /* ADDED */ 
 
} 
 

 
header ul li { 
 
    display: inline-block; 
 
    padding-right: 15px; 
 
    margin-left: 10px; 
 
} 
 

 
.filler { 
 
    flex-grow: 1; 
 
}

<header> 
 
    <ul> 
 
    <li><a href="#">Logo</a></li> 
 
    <li><a href="#">New article</a></li> 
 
    <li class="filler"></li> 
 
    <li><a href="#">username</a></li> 
 
    </ul> 
 
</header>