Проблемы с полем снизу и отступом снизу

0

Я пытаюсь создать веб-сайт в первый раз. Я пытаюсь настроить вид навигационной панели с правой стороны, но я не могу правильно позиционировать ее. Когда я использую margin или padding, только margin и padding работают сверху, справа и слева. Когда я пытаюсь использовать padding-bottom или margin-bottom, чтобы попытаться центрировать его лучше, ничего не происходит. Любая помощь будет оценена !.

Это в основном панель навигации, которую я пытаюсь подражать: http://pixelbot.ro/

Мой HTML:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="../CSS/Reset.css" />
    <link rel="stylesheet" href="../CSS/main.css" />
    <link rel="shortcut icon" href="../Img/icon.png" />
    <title>Title</title>
</head>
<body>
        <div class="nav">
            <h1 class="header">testheader</h1>
            <ul class="navbar">
                <li class="navbar"><a href="http://www.twitter.com" class="navitem">Twitter</a></li>
                <li class="navbar"><a href="http://www.facebook.com" class="navitem">Facebook</a></li>
                <li class="navbar"><a href="http://www.github.com" class="navitem">GitHub</a></li>
                <li class="navbar"><a href="http://www.com" class="navitem">Home</a></li>
            </ul>
        </div>
</body>
</html>

и мой CSS:

body {

}

.header {
    color: white;
    font-family: Myriad Pro;
    margin-top: .5em;
    margin-left: 2em;
    font-size: 3em;
}

.nav {
    position: absolute;
    width: 100%;
    height: 6em;
    background: #353535;
}

.navbar {
    position: relative;
    display: block;
    float: right;
    padding-left: 30px; 
}

.navitem {
    margin: 30px;
    text-decoration: none;
    color: white;
    padding: .5em;
    text-align: center;
    vertical-align: middle;
}
  • 0
    К какому элементу вы пытаетесь добавить нижние отступы или поля? nav ? navbar ? navitem ?
  • 0
    Я пытался сделать это с navbar, потому что я хочу, чтобы каждый элемент списка был немного приподнят, чтобы он был более центрирован. Однако padding / margin-bottom также не работал с nav или navitem.
Теги:

1 ответ

0
Лучший ответ

DEMO

  • Не сохраняйте элемент блока класса .header (по умолчанию по умолчанию установлен div display:block), он заставляет другие элементы падать, чтобы изменить его display:inline-block таким образом, что он не будет иметь полную ширину.

  • используйте margin-bottom: & margin-top: свойство для установки полей и обратите внимание, что равные поля в верхнем и нижнем элементах не приведут к тому, что элемент будет в точном центре, потому что обычно длина линии шрифта больше снизу, а сверху.

CSS:

.header {
    color: #FFFFFF;
    display: inline-block;
    font-family: Myriad Pro;
    font-size: 3em;
    line-height: 1em;
    margin-bottom: 22px;
    margin-left: 2em;
    margin-top: 0.5em;
}
.nav {
    background: none repeat scroll 0 0 #353535;
    position: absolute;
    width: 100%;
    min-width: 980px;
}
.navbar {
    display: block;
    float: right;
    margin-top: 18px;
    padding-left: 30px;
    position: relative;
}
.navitem {
    color: #FFFFFF;
    margin: 30px;
    padding: 0.5em;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
}
Поделиться
  • 0
    Большое спасибо!
  • 0
    пожалуйста.
Показать ещё 2 комментария

Ещё вопросы

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