Как мне создать интервал между этими элементами списка? [Дубликат]

0

Мне просто интересно, как бы я разместил 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-пиксельный разрыв пустого пространства (то же, что и цвет фона) между этими тремя элементами, чтобы отделить их в навигационной панели. И по какой-то причине вертикальное выравнивание текста работает неправильно.

  • 0
    если вы хотите разделить их по горизонтали, вы можете использовать отступы. Если вы хотите разделить их по вертикали, вы можете использовать line-height.
  • 0
    Может быть, здесь что-то упущено, но вам не нужен li {float: left; Маржа направо: 3px; }
Теги:

3 ответа

3

Я бы предложил:

li + li {
    margin-left: 3px;
}

Демо-версия JS Fiddle.

Рекомендации:

  • 0
    Большое вам спасибо, такой быстрый ответ тоже. Очень ценится!
  • 0
    Добро пожаловать, и я рад, что помог. : D
0

Если вы хотите, чтобы ваш текст был правильно присвоен в теге a, используйте ту же высоту строки, что и размер шрифта. например:

a {
    font-size:12px;
    line-height: 12px;
}
0

использовать margin-bottom:

jsFiddle

li{
   margin-bottom:3px;
}

Ещё вопросы

Сообщество Overcoder
Наверх
Меню