我有一個包含一些專案的動態選單。我希望專案共享可用空間，以便較大的文本占用更多空間。并且所有這些都將具有相同的填充，以便懸停顏色將填充為其定義的空間。
-----------------------------------------------------------
| Test | Test Very Bigger Item | Test Bigger item |
-----------------------------------------------------------
選單看起來與上面沒有邊框的相似。在懸停時，背景顏色需要填滿它周圍的空間。
ul {
width: 600px;
display: flex;
justify-content: space-around;
border: 1px solid blue;
list-style: none;
padding: 0px;
}
li {
border: 1px solid blue;
}<ul>
<li>
Test
</li>
<li>
Test Very Very Large Bigger Item
</li>
<li>
Test Bigger item
</li>
</ul>uj5u.com熱心網友回復：
使用這種風格（這里一切都是動態的）-
CSS（修改）-
ul {
width: 600px;
display: flex;
list-style: none;
padding: 0px;
border: solid 1px blue;
}
li {
flex: auto;
text-align: center;
padding: 8px 0;
}
li:hover {
background: blue;
color: white;
cursor: pointer;
}
HTML（無變化）-
<ul>
<li>
Test
</li>
<li>
Test Very Very Large Bigger Item
</li>
<li>
Test Bigger item
</li>
</ul>
作業演示在這里
uj5u.com熱心網友回復：
好了，根據您的評論的寬度的的ul不一定必須600px的。我建議設定 amax-width: 600px并給li元素一個額外的填充。
ul {
max-width: 600px;
display: flex;
border: 1px solid blue;
list-style: none;
padding: 0px;
}
li {
padding: 0 2em;
border: 1px solid blue;
min-width: max-content;
}
li:hover {
background: red;
}<ul>
<li>
Test
</li>
<li>
Test Very Very Large Bigger Item
</li>
<li>
Test Bigger item
</li>
</ul>根據 的位置，ul您可以將 flex 容器內的元素設定為justify-content: flex-start（如果ul放置在螢屏左側）或justify-content: flex-end（如果ul放置在右側）。
uj5u.com熱心網友回復：
我做了一些改變：
ul {
width: 600px;
height: 30px;
display: flex;
justify-content: space-between;
align-items: center;
border-top: 1px dashed blue;
border-bottom: 1px dashed blue;
list-style: none;
padding: 0px;
}
li {
border-left: 1px solid blue;
border-right: 1px solid blue;
padding: 0 10px;
height: 100%;
display: flex;
align-items: center;
}
li:hover {
background: red;
}<ul>
<li>
Test
</li>
<li>
Test Very Very Large Bigger Item
</li>
<li>
Test Bigger item
</li>
</ul>轉載請註明出處，本文鏈接：https://www.uj5u.com/net/373261.html