Как поместить вещи в div с истинной границей - PullRequest
Новая
       0

Как поместить вещи в div с истинной границей

0 голосов
/ 24 декабря 2011

У меня есть div, но я не знаю, как установить атрибуты css position.Я хотел бы, чтобы div (nav) был помещен в середине страницы.Затем я хотел бы поместить контент в div так, чтобы границы окружали контент.В настоящее время граница div ничем не граничит, и содержимое, которое она должна граничить, отображается ниже div.

HTML: 

         <div id='nav'>
<a id='ask' class='button' unselectable='on' style='left: 20px;' href='#'>one</a>
<a id='unanswered' class='button' unselectable='on' style='left: 120px;' href='#'>two</a>
<a id='unanswered' class='button' unselectable='on' style='left: 220px;' href='#'>three</a>
<a id='unanswered' class='button' unselectable='on' style='left: 320px;' href='#'>four</a>

CSS: 

.button{
 position: absolute;
 top: 50px;
border: 1px solid orange;
cursor: pointer;
padding: 0px 10px 0px 10px;
}

#nav{
position: relative;
margin-right: auto;
margin-left: auto;
margin-bottom: 10px;
border: 1px solid gray;
width: 700px;
}

Ответы [ 2 ]

2 голосов
/ 24 декабря 2011

Поскольку для .button установлено значение position:absolute, контейнерный div (.nav) не считает их высоту своей собственной.

Добавьте очистку div после ссылок: 

<div style="clear:both;"></div>

Это должно сработать.

Кроме того, вам не нужно, чтобы ваши элементы a были установлены на position:absolute - вот мое решение: 

.button {
    display:inline-block;
    margin-top: 50px;
    margin-right:80px;
    border: 1px solid orange;
    cursor: pointer;
    padding: 0px 10px;
}

#nav {
    position: relative;
    margin: 0 auto;
    border: 1px solid gray;
}

Пример .

0 голосов
/ 24 декабря 2011

Альтернативой решению Пурму является специальная установка высоты div #nav в css: 

#nav
{
     position: relative;
     margin-right: auto;
     margin-left: auto;
     margin-bottom: 10px;
     border: 1px solid gray;
     width: 700px;
     height: 120px;
}

Как показано на этой скрипке .

...