Flexbox 元素間隙的空間均勻選擇器？

Question

嗨，我有一個由 flex box 創建的導航欄。 項目空間均勻。 我需要用相同的藍色填充元素周圍的空白。 而且在 hover 顏色會改變之后，所以我需要 select 兩個 li 元素和間隙，有什么辦法可以讓 select 得到它們嗎？

 #menu{ display: flex; margin-top: 0; padding: 0; justify-content: space-evenly; } #menu li { height: 100%; list-style-type: none; background:rgba(5, 151, 242, 1); } #menu li a{ color:white; text-decoration: none; text-transform: uppercase; line-height: 6.5; width: 100%; height: 100%; }

 <ul id="menu"> <li><a href="page.php">Link 1</a></li> <li><a href="page.php">Link 2</a></li> <li><a href="page.php">Longer Link 3</a></li> <li><a href="page.php">Link 4</a></li> </ul>

Answer 1

除了使用justify-content: space-evenly ，您可以對每個<li>使用flex: 1 。 您可以使用text-align: center 。
然后，為每個項目創建 hover 效果。

 #menu{ display: flex; margin-top: 0; padding: 0; } #menu li { height: 100%; list-style-type: none; background:rgba(5, 151, 242, 1); flex: 1; text-align: center; transition: 0.3s; } #menu li a { border-left: 1px solid red; border-right: 1px solid red; color: white; text-decoration: none; text-transform: uppercase; line-height: 6.5; height: 100%; display: inline-block; } #menu li:hover { background: rgba(5, 151, 242, 0.8); }

 <ul id="menu"> <li><a href="page.php">Link 1</a></li> <li><a href="page.php">Link 2</a></li> <li><a href="page.php">Link 3</a></li> <li><a href="page.php">Link 4</a></li> </ul>

Answer 2

你的問題是你想復雜。 你不需要justify-content: space-evenly; , 但你需要讓 li 元素隨着: flex-grow: 1;而增長

你也不需要使用rgba ，如果你不使用透明度，你可以使用rgb

 #menu{ display: flex; margin-top: 0; padding: 0; } #menu li { height: 100%; list-style-type: none; background:rgb(5, 151, 242); flex-grow: 1; text-align: center; } #menu li:hover { background:rgba(155, 5, 242); } #menu li a{ color:white; text-decoration: none; text-transform: uppercase; line-height: 6.5; width: 100%; height: 100%; display: block; }

 <ul id="menu"> <li><a href="page.php">Link 1</a></li> <li><a href="page.php">Link 2</a></li> <li><a href="page.php">Longer Link 3</a></li> <li><a href="page.php">Link 4</a></li> </ul>

編輯：

我還按照要求使整個塊可點擊。 這是通過添加display: block;來完成的。 到a元素。 鏈接通常是內聯元素，因此這會將其切換為像塊元素一樣的行為，女巫會監聽問題中已經存在的寬度/高度設置。