继续调整文本大小以推动其容器中的其他元素？

StackOverflow https://stackoverflow.com/questions/217741

  •  03-07-2019
  •  | 
  •  

题

我有以下html 

          <div id="menu">
            <ul class="horizMenu">
            <li id="active"><a href="#" id="current">About</a></li>
            <li><a href="#">Archive</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">Item four</a></li>
            <li><a href="#">Item five</a></li>
            </ul>
        </div>

在css我有

.horizMenu li
{
    display: inline;
    list-style-type: none;
    padding-right: 20px;
}
#menu
{


    text-align:center;
    margin-bottom:10px;
    letter-spacing:7px;
}
#menu a
{
    color:red;

}
#menu a:hover
{
    color:blue;
    font-weight:bold;
}

一切都很好，除了当我将鼠标悬停在链接上时，颜色会发生变化并变为粗体，这就是我想要的，但它也会导致所有其他li元素稍微移动然后向后移动鼠标关闭。是否有一种简单的方法可以阻止这种情况发生？

有帮助吗？

解决方案

不确定是谁，但是Mauro的答案基本上是正确的：你不能轻易地制作一个自动宽度的项目取决于如果里面的字体不是粗体的宽度。

然而，'浮动：左;'规则也是必要的，因为您无法设置内联显示元素的宽度。并且'em'可能是一个更好的单位，使所需的宽度取决于按钮中的字体大小。

其他提示

为列表项元素添加一个宽度大于项目粗体宽度的宽度，这样它们就不会被推出。

#menu li
{
   width: 150px;
}

或者你可以尝试使用等宽字体，它不会受到悬停时粗体/非粗体的影响。

尝试使用此功能 menutext { line-height：10px; /* 管他呢 */ }

并且，要设置内联元素的宽度，请使用display：inline-block;

浮动：左边可能不那么友好，如果你使用它并且它会混淆使用清楚：两者

我刚遇到同样的问题。我想到的，现在可能会使用的解决方案是使用文本阴影。

a:hover {
  color:blue;
  text-shadow:0px 0px 1px blue;
}

虽然文字看起来有点模糊。如果将第3个参数设置为0，则文本不会模糊，但看起来会更大胆。

我认为这比处理宽度动态文本要好。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top