Слишком широкая граница из-за поля

У меня есть встроенный неупорядоченный список в качестве панели навигации в моем html. Я хотел, чтобы верхняя граница отображалась при наведении на элемент li. Но когда я добавляю margin или padding, чтобы сделать некоторое пространство между последовательными элементами, граница слишком широкая. Я не хочу добавлять пробелы в html. Есть ли другой путь? Я попытался положить пустой div с определенной шириной, но это не сработало. Лучший результат, который я мог получить, - это текстовое оформление overline, но, к сожалению, мне нужен другой цвет, чем черный. Вот мой код:Слишком широкая граница из-за поля

LI 
{ 
display: inline; 
font-family: Arial; 
font-size: 16px; 
font-weight: bold; 
text-transform: uppercase; 
letter-spacing: 0.2em; 
padding-left: 30px; 
} 
LI:hover 
{ 
border-top: 1px solid #000000; 
}

и HTML

<ul> 
      <a href="#"><li>link 1</li></a> 
      <a href="#"><li>link 2</li></a> 
      <a href="#"><li>link 3</li></a> 
      <a href="#"><li>link 4</li></a> 
</ul>

источник

2013-06-26 user2525842

Пожалуйста, ваши HTML и CSS. – j08691

Я бы рекомендовал плавать все элементы внутри списка и сделать его отображаемым как блоки. Встроенные списки трудно расшифровать порой - однако, разместите свой код. Давайте посмотрим на это – ProfileTwist

Я добавил свой код, возможно, теперь вы видите более простое решение. – user2525842

Набивка расширяет ширину ваших элементов а рентабельность создает пустой интервал до и после элемента. Вы можете больше узнать о Box Model.

я настроил свой код, чтобы лучше удовлетворить ваш случай:

HTML:

<ul> 
    <a href="#"><li>link 1</li></a> 
    <a href="#"><li>link 2</li></a> 
    <a href="#"><li>link 3</li></a> 
    <a href="#"><li>link 4</li></a> 
</ul>

CSS:

ul a { 
    text-decoration: none !important; //Removes default underline form link 
} 

li { 
    display: inline; 
    font-family: Arial; 
    font-size: 16px; 
    font-weight: bold; 
    text-transform: uppercase; 
    letter-spacing: 0.2em; 
    padding-left: 0.2em; // Letter spacing is making borders to extend slightly more on the right. This makes borders extend similarly on the left 
    padding-top: 2px; //To push top border slightly higher, so that top and bottom is the same distance from your text 
    margin-left: 30px; 
    text-align: center; 
    border-top: 1px solid transparent; //Stops navigation from extending on :hover 
} 

li:hover { 
    border-top: 1px solid #000; //border top on :hover 
}

FiddleJS: http://jsfiddle.net/kGN69/2/

источник

2013-06-26 22:51:54 Ninetou

Спасибо большое! Это именно то, что мне нужно. Но только для того, чтобы лучше понять - почему необходимо сначала сделать прозрачную границу? Как это влияет на его ширину: наведите указатель мыши? – user2525842

Это не влияет на ширину ваших предметов, однако это хорошая практика, если вы будете рисовать границу: состояние зависания. Если у вас не будет этой прозрачной границы, браузер будет нажимать ваш элемент на 1px (толщина границы) при зависании, потому что ему придется выделять дополнительное пространство над данным элементом. Это не влияет на ваш код, потому что вы объявили 'display'' inline', но это было бы на 'inline-block' или' block' или если вы решите добавить границы по сторонам. Живой пример без и с прозрачными границами: http://jsfiddle.net/kGN69/5/ vs http://jsfiddle.net/kGN69/6/ – Ninetou

Вместо того, чтобы использовать запас, попробуйте использовать вместо Перетяжка.

Могу ли я увидеть ваше кодирование ...? Было бы намного проще.

Во-первых, вы уверены, что редактируете ливр?

Пример:

#yourdiv li a:hover{ 
..... 
}

Если вы, попробуйте изменить это.

Пример:

#yourdiv{ 
... 
padding-top:5px; 
padding-bottom:5px; 
padding-right:5px; 
padding-left:5px; 
}

источник

2013-06-26 21:47:16

Слишком широкая граница из-за поля

ответ

Смежные вопросы