Navigation / Padding / Parent Divs - PullRequest
Новая
       18

Navigation / Padding / Parent Divs

1 голос
/ 28 января 2011

Я пытаюсь создать навигационное меню по центру, которое находится внутри элемента div, занимающего 100% ширины экрана. У меня есть свои div-элементы навигации в родительском div, называемом навигацией, и этот родительский div находится внутри контейнера навигации. Я чувствовал, что это необходимо для центрированной навигации в пределах этого родительского div с шириной 100%.

Проблема в том, что мне не повезло, когда родительский div расширяется с соответствующим заполнением, которое я даю div-элементам navItem. Извините, если это немного сбивает с толку, спасибо за любой предложенный совет.

HTML 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>
            MC Machine Test
        </title>
        <link rel="stylesheet" href="main.css" type="text/css">
    </head>
<body>
    <div class="top">
    </div>
    <div class="navContainer">
        <div class="navigation">
            <div class="navItem">Home</div>
            <div class="navItem">Products</div>
            <div class="navItem">Facility</div>
            <div class="navItem">Photo Gallery</div>
            <div class="navItem">Request a Quote</div>
            <div class="navItem">Contact Us</div>
        </div>
    </div>
    <div class="mainSection">
    </div>
</body>
</html>

Вот CSS. 

.navContainer
{
    width:100%;
    background-color:#ffffff;
    color:#333333;
    border-bottom:solid 1px #333333;
}

.navigation
{
    border:0px 1px 1px 0px solid #333333;
    width:680px;
    margin-left:auto;
    margin-right:auto;
}
.navItem
{
    padding:20px;
    border-right:1px solid #cccccc;
    display:inline;
}

Ответы [ 2 ]

2 голосов
/ 28 января 2011

Не используйте DIV для создания меню.Используйте стилизованные неупорядоченные списки.

См .: Я люблю списки .

1 голос
/ 28 января 2011

Я могу ошибаться, но я думаю, что вы не можете добавить верхний / нижний отступ для встроенных элементов. Если я понял, что вы хотите сделать правильно, вы можете определить отображение как блок и использовать поплавки, чтобы они стояли рядом друг с другом, а не под друг другом. 

.navItem
{
    padding:20px;
    border-right:1px solid #cccccc;
    display:block;
    float:left;
}
...