Не удается изменить высоту панели навигации CSS

Question

Не удается изменить высоту панели навигации CSS

0

У меня есть панель навигации, которая отлично работает, но я хочу добавить отступы и высоту каждой ссылки. Всякий раз, когда я это делаю, он делает все ссылки, кроме первого, выше, чем они должны быть. По какой-то причине это не работает в Fiddle, поэтому вот код: (CSS)

body {
overflow-x:hidden;
font:13px arial;
background-color:#171120;
margin:0;
}
nav {
height:100px;
width:100%;
padding:10px;
padding-top:30px;
background-image:url('nav_bg.png');
border-bottom: 3px solid #302342;
}
nav #header {
color:#FFFFFF;
font:bold 56px arial;
float:left;
}
nav ul {
float:right;
list-style-type:none;
margin:0;
padding:0;
margin-top:20px;
margin-right:180px;
overflow:hidden;
}
nav ul li {
float:left;
}
nav ul li a:link,a:visited {
display:block;
width:180px;
##################################If you add height or border or padding, the links become taller!
background-color:#333333;
text-align:center;
font:bold 26px arial;
color:#ffffff;
text-decoration:none;
}

(HTML)

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styling.css"/>

<title>Testing...</title>
</head>

<body>
<nav>
<div id="header">Testing...</div>
<ul>
<li><a href="#">Home</li>
<li><a href="#">Home</li>
<li><a href="#">Home</li>
<li><a href="#">Home</li>
</ul>
</nav>
</body>
</html>

Почему я не могу добавить высоту, прописку или границу по ссылкам без их внезапного повышения?

tasteslikejava 17 янв. 2014, в 17:54

Источник

0

Как вы ожидаете добавить что-то, что занимает высоту, не делая что-то выше? Это не имеет смысла.
Brian Glaz 17 янв. 2014, в 16:35
1

Ваши a теги не закрыты ...
Cedric Reichenbach 17 янв. 2014, в 16:36
0

nav ul li a:link,a:visited { - обратите внимание a:visited с a a:visited пристрелет все теги посещаемые состояния ;-)
Nick R 17 янв. 2014, в 16:36
1

Также: комментарии CSS выглядят так: /* a comment */
Cedric Reichenbach 17 янв. 2014, в 16:37
0

Ой ну спасибо. Очевидно, я знаю, что он должен стать выше, но он добавляет нижнюю часть ссылки к вершине, поэтому, если я добавлю border-radius , она будет изгибаться вверху в неправильном направлении. И когда я прокручиваю эту верхнюю часть, она действует как отдельная ссылка.
tasteslikejava 17 янв. 2014, в 16:40

Показать ещё 3 комментария

Теги:

html

css

html5

css3

navigationbar

1 ответ

Ещё вопросы

Как вы ожидаете добавить что-то, что занимает высоту, не делая что-то выше? Это не имеет смысла.
nav ul li a:link,a:visited { - обратите внимание a:visited с a a:visited пристрелет все теги посещаемые состояния ;-)
Также: комментарии CSS выглядят так: /* a comment */
Ой ну спасибо. Очевидно, я знаю, что он должен стать выше, но он добавляет нижнюю часть ссылки к вершине, поэтому, если я добавлю border-radius , она будет изгибаться вверху в неправильном направлении. И когда я прокручиваю эту верхнюю часть, она действует как отдельная ссылка.

Maarten Hartman · Answer 1 · 2014-01-17T13-46-00.000Z

Это хорошо знакомая и раздражающая проблема.

Это можно решить, используя "box-sizing"

См. Эту ссылку для учебника

Это объяснение очень важно:

"Свойство CSS3, определяющее размер окна, может сделать именно это. Значение поля границы (в отличие от поля содержимого по умолчанию) делает конечный отображаемый ящик объявленной шириной, а любая граница и прокладка разрезаются внутри поля. Теперь мы можем безопасно объявите нашу текстовую область шириной 100%, включая отступы и границы на основе пикселей, и отлично выполним макет ".