Мне просто интересно, как бы я разместил 3 пикселя между различными элементами списка в следующем html? Кроме того, как правильно вертикально выравнивать текст внутри этих списков?
CSS:
body {
background-color: #4a4a4a;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
a:link, a:visited {
display: inline-block;
vertical-align: middle;
width: 318px;
font-size: 12pt;
font-weight: bold;
font-family: helvetica, arial;
letter-spacing: 4px;
vertical-align: middle;
color: #4a4a4a;
background-color: #f99400;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
}
a:hover, a:active {
background-color: #fbc486;
}
HTML:
<ul>
<li><a href="#news">About</a></li>
<li><a href="#contact">Portfolio</a></li>
<li><a href="#about">Contact</a></li>
</ul>
Так что да, я просто хочу поместить 3-пиксельный разрыв пустого пространства (то же, что и цвет фона) между этими тремя элементами, чтобы отделить их в навигационной панели. И по какой-то причине вертикальное выравнивание текста работает неправильно.
Я бы предложил:
li + li {
margin-left: 3px;
}
Рекомендации:
Если вы хотите, чтобы ваш текст был правильно присвоен в теге a, используйте ту же высоту строки, что и размер шрифта. например:
a {
font-size:12px;
line-height: 12px;
}