Исправить размер тега "li" и уменьшить жирный шрифт - PullRequest
Новая
       5

Исправить размер тега "li" и уменьшить жирный шрифт

0 голосов
/ 08 июня 2011

У меня есть этот сайт, обратите внимание, что в a:hover источник должен быть выделен жирным шрифтом.Проблема в том, что размер шрифта уменьшается, и, в конце концов, я читаю, он также уменьшается.

Есть две ошибки в HTML, которые вы хотели бы получить от вас:

  1. Источник не должен уменьшаться, когдасоюзник выделен жирным шрифтом.В случае a:hover нельзя изменить размер тега li.
  2. Тег li должен иметь фиксированный размер, а не размер в зависимости от содержимого.Как я могу исправить размер li?

Ответы [ 3 ]

2 голосов
/ 08 июня 2011

Не знаю, правильно ли я понял ваш вопрос, но вы не можете поставить 

<code>ul#menu li
{
   width:200px; //change this amount...
}
1 голос
/ 08 июня 2011

Вы можете предотвратить прыжки ящиков,

  1. , плавающих li s
  2. , добавляя width к добавлению li s
  3. влево и вправо padding на li s
  4. , снимая hover с a и добавляя его к li s

- 

ul#menu li {
 float:left; 
 width:120px; 
 background-color: #676767; 
 text-align:center; 
 padding:20px 20px; 
 margin:0 .25em;
}

ul#menu li a {
 color: #FFFFFF; 
 text-decoration: none;
} 

ul#menu li:hover {
 font-weight: bold; 
 background-color: #868686; 
 color: #FFFFFF;
}

http://jsfiddle.net/jasongennaro/5jJg3/10/

Важно :

  1. текст, выделенный жирным шрифтом, все еще прыгает, но поля не
  2. Вы сможете щелкнуть только текст **, однако, если хотите, вы можете сделать весь li кликабельным с помощью js.
1 голос
/ 08 июня 2011

Я позволил себе прикоснуться к вашему CSS-коду, чтобы достичь желаемого результата.Это будет: 

ul#menu li
{
    background-color: #676767;
    display: inline-block;
    text-align: center;
}
ul#menu li a
{
    letter-spacing: 1px;
    color: #FFFFFF;
    display: block;
    line-height: 45px;
    padding: 0;
    text-decoration: none;
    width: 100px;
}
ul#menu li a:hover
{
   letter-spacing: 1px;
   font-weight: bold;
   background-color: #868686;
   color: #FFFFFF;
}

То, что я сделал, было:

  • Удалите отступы из li и a элементов (должно быть 0)
  • Установите для элемента a значение display:block с фиксированной шириной и высотой
  • Установите letter-spacing из a и a:hover равными 1 пикселю, чтобы они сохраняли одинаковое расстояние между символами
  • Сохранитьтекст в центре с line-height и text-align:center

Проблема заключалась в том, что заполнение выдвигало границы поля, когда элемент изменил свой размер.

...