我有一个水平导航菜单,基本上就是一个 <ul>
元素并排设置。我没有定义宽度,只是使用填充,因为我希望宽度由菜单项的宽度定义。我将当前选择的元素加粗。
麻烦的是,在加粗时,单词会变得稍微宽一些,这会导致其余元素稍微向左或向右移动。有没有聪明的方法来防止这种情况发生?沿着告诉填充忽略由粗体引起的额外宽度的东西?我的第一个想法是简单地从“事件”元素的填充中减去几个像素,但这个数量会有所不同。
如果可能的话,我想避免在每个条目上设置静态宽度然后居中,而不是我目前使用的填充解决方案,以便将来对条目的更改变得简单。
最佳答案
我遇到了同样的问题,但经过一点折衷得到了类似的效果,我改用了 text-shadow 。
li:hover {text-shadow:0px 0px 1px black;}
这是一个工作示例:
body {
font-family: segoe ui;
}
ul li {
display: inline-block;
border-left: 1px solid silver;
padding: 5px
}
.textshadow :hover {
text-shadow: 0px 0px 1px black;
}
.textshadow-alt :hover {
text-shadow: 1px 0px 0px black;
}
.bold :hover {
font-weight: bold;
}
<ul class="textshadow">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li><code>text-shadow: 0px 0px 1px black;</code></li>
</ul>
<ul class="textshadow-alt">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li><code>text-shadow: 1px 0px 0px black;</code></li>
</ul>
<ul class="bold">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li><code>font-weight: bold;</code></li>
</ul>
关于CSS:在不改变容器大小的情况下加粗一些文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5687035/