2

我有以下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 元素轻微移动，然后在鼠标关闭时向后移动. 有没有一种简单的方法可以阻止这种情况发生？

4

4 回答 4

3

Not sure who -1ed, but Mauro's answer is essentially correct: you can't trivially make an item with automatic width depend on what the width would have been if the font inside weren't bold.

However, a 'float: left;' rule will also be necessary as you can't set the width of an inline-display element. And 'em' would probably be a better unit, to make the required width dependent on the font size in the buttons.

于 2008-10-21T08:03:20.157 回答
2

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

#menu li
{
   width: 150px;
}

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

于 2008-10-20T08:02:01.733 回答
1

try using this menutext { line-height: 10px; /* or whatever */ }

and also, to set the width of a inline element, use display: inline-block;

float:left might be not so friendly, if you do use it and it messes things up use clear:both

于 2010-11-18T19:06:33.967 回答
1

I've just had the same problem. A solution I thought of, and might use from now on, is to use text-shadow instead.

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

The text will look a little blur though. If you set the 3rd parameter to 0, text won't be blur but will look just a little bit bolder.

I'd say this is better than dealing with width-dynamic texts.

于 2011-12-29T20:22:42.340 回答