Не позволять изменению размера текста перемещать другие элементы в его контейнере?
У меня есть следующий 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
Добавьте ширину к элементам элемента списка, которая больше, чем ширина элементов, выделенная жирным шрифтом, таким образом, они не будут вытеснены из строки.
#menu li
{
width: 150px;
}
В качестве альтернативы вы можете попробовать моноширинный шрифт, на который не влияет полужирный / не жирный шрифт при наведении курсора.
Не уверен, кто -1ed, но ответ Мауро, по сути, правильный: вы не можете тривиально сделать элемент с автоматической шириной в зависимости от того, какой была бы ширина, если бы шрифт внутри не был полужирным.
Однако "float: left;" Правило также будет необходимо, поскольку вы не можете установить ширину элемента встроенного отображения. И, вероятно, лучше всего подойдет «em», чтобы сделать требуемую ширину зависимой от размера шрифта в кнопках.
попробуйте использовать это menutext { высота строки: 10 пикселей; / * или что угодно * / }
а также, чтобы установить ширину встроенного элемента, используйте display: inline-block;
float: left может быть не очень дружелюбным, если вы его используете, и он все портит, используйте clear: both
У меня была такая же проблема. Решение, которое я придумал и которое я мог бы использовать с этого момента, - использовать вместо этого text-shadow.
a:hover {
color:blue;
text-shadow:0px 0px 1px blue;
}
Однако текст будет выглядеть немного размытым. Если вы установите для 3-го параметра значение 0, текст не будет размытым, но будет выглядеть немного более жирным.
Я бы сказал, что это лучше, чем иметь дело с текстами с динамической шириной.
Не уверен, почему я получил минус 1, но если вы исправите ширину элемента li, то выделение полужирным шрифтом hrefs не будет иметь того же эффекта, поскольку в li достаточно места для размещения новой ширины. Я постоянно использую этот .Net xhtml.