使用 CSS 共享具有相等填充的菜单项的宽度

Posted 2023-05-08

【中文标题】使用 CSS 共享具有相等填充的菜单项的宽度

【英文标题】：Share the width for menu items with equal padding using CSS

【发布时间】：2022-01-10 22:31:00

【问题描述】：

我有一个包含一些项目的动态菜单。我希望这些项目共享可用空间，以便更大的文本占用更多空间。并且它们都将具有相同的填充，以便悬停颜色将填充为其定义的空间。

 -----------------------------------------------------------
|   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>

上面的代码确保了正确的间距，但悬停不会占用可用空间。

【问题讨论】：

是否需要 600px 宽？

@FloRagossnig ul 会有一个宽度，尽管不一定是 600px。

【参考方案1】：

使用这种风格（这里的一切都是动态的）-

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>

工作演示here

【参考方案2】：

好的，根据您的评论，ul 的 宽度 不一定是 600 像素。我建议设置一个 max-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 的位置，您可以将弹性容器内的元素设置为justify-content: flex-start（如果ul 位于屏幕左侧）或justify-content: flex-end（如果@ 987654330@ 放在右边）。

【参考方案3】：

我做了一些改变：

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>

【讨论】：

好的，但我希望将额外的空间划分给每个项目。这样悬停就会被覆盖。

我编辑了sn-p！