HTML / CSS: расположение элементов ссылки в Div внутри другого Div

Question

Извините за странную / запутанную тему!Я играю вокруг и пытаюсь сделать простой менубар.И я хочу, чтобы моя страница была внутри упаковщика.Но мой менубар меняет стиль и выглядит очень глупо, когда я меняю положение с абсолютного на другое.

Вот как это выглядит: http://jsfiddle.net/2rEkh/

Я хочу, чтобы это выглядело так: http://jsfiddle.net/rNmsP/

Но я не могу использовать положение: абсолютное;потому что тогда он не останется внутри моего варп-дива.И использование относительного или любого другого делает это выглядит уродливым.

Любые указатели на то, что мне нужно сделать, чтобы это выглядело как 2-я ссылка, без использования абсолютного?

Заранее спасибо.

Answer 1

попробуйте это; проверить

Плавающий контейнер wd-navbar должен быть скрыт переполнением. иначе элемент контейнера соберет

#wrapper {
  margin: 0 auto;
  text-align: left;
  margin-bottom: 5px;
}

#wd-navbar{
background-color: #25BAFA;
border-bottom: 2px solid #ccc;
background: #25BAFA;color: #000000;overflow:hidden;}

Answer 2

Попробуйте добавить немного высоты в панель навигации div: # wd-navbar {height: 40px;}

Это должно дать вам желаемый вид (без избавления от позиции: абсолют) ...

Answer 3

попробовать это?

http://jsfiddle.net/rNmsP/1/

#wd-navbar li a{
display: block;
background-color: #25BAFA;
border-radius: .3em;
padding: .5em;
text-decoration: none;
color: white;
width:25px;
height:20px;
}

#wd-navbar li ul{
display: none;
position: relative;
top: 0px;
padding: 0;
}

edit:

добавить это также для высоты панели навигации

#wd-navbar{
top 0;
left: 0;
width: 100%;
background-color: #25BAFA;
border-bottom: 2px solid #ccc;
background: #25BAFA;
color: #000000;
height:40px;
}

Answer 4

попробуйте поиграть с этим:

#wd-navbar{ 
...   
float:right;   
...  
 }

Answer 5

Ваша навигационная панель неправильно упаковывает ваши плавающие элементы. Просто добавьте display: inline-block; к вашему #wd-navbar, и все должно получиться хорошо.