将<li>宽度调整为其内容的宽度

Question

我有以下CSS代码：

nav li {
    display: inline-block;
    text-align: center;
}

nav li a {
    display: block;
    width: 100%;
    height: 100%;
}

nav li :hover {
    background-color: var(--main-color);
    color: white;
}

这导致我的导航栏中的元素如下所示：

但实际上有4个项目，而不是6.我会在<li>中添加一些填充：

但是当我将鼠标悬停在第一个项目上时，我的两侧都有这个丑陋的白色空间。 Margin做同样的事情。我们移除margin / padding并手动将<li>宽度设置为120px：

现在，前两个项目的格式在某种程度上是可以接受的，但是项目a和b在视觉上占用的空间太大了。我的目标是这样的（在图像编辑器中制作）：

换句话说，我希望我的<li>元素的宽度通过额外的填充调整为其内容，而子<a>元素仍然占据<li>空间的100％ 。有什么想法吗？

Answer 1

修改

我已更新更新了您发布的JSFiddle。

<小时/>

您需要将a元素更改为不display:block（应该是inline）。另外，您不需要指定width的{​​{1}}和height。只需为100%制作padding: 15px即可，并且您将拥有相等，间距均匀的悬停填充。

我调整了上面的代码并将其放入codepen中，请参阅此处：

http://codepen.io/himmel/pen/BNJZoL

以下是我更改CSS的方式：

a

Answer 2

尝试使用表格布局

num=int(input('please input a number: '))

if num<=0:
    print('1')
elif num<=5:
    print('2')
elif num<=10:
    print('3')

body {margin:0}
nav ul {
  padding:0;
  margin:0;
  width: 100%;
  display: table;
}
nav li {
    display: table-cell;
    text-align: center;
}

nav li a {
    background: #fafafa;
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 10px;/*or whatever*/
}

nav li :hover {
    background-color: brown;
    color: white;
}