У меня проблемы с размещением элементов списка в строке - PullRequest
Новая
       24

У меня проблемы с размещением элементов списка в строке

1 голос
/ 12 марта 2012

У меня есть несколько элементов списка с тегами привязки, которые настроены на отображение блока с фоновыми изображениями, и я пытаюсь настроить их для отображения встроенного, но сейчас они только накладываются друг на друга.Ul генерируется WordPress.Когда я проверяю li, они заполняют весь родительский div, но я не уверен, почему.

ссылка на пароль активного сайта: springy88

CSS 

.nav-bar li {display: inline; font-size: 2.66em;}
.shop a{background-image:url('../images/shopFull.png'); width:209px; height: 74px; display:block; text-indent:-9999px; overflow:hidden;}
.shop a:hover { background-position: 0 -30px; }
.services a{background-image:url('../images/servicesFull.jpg'); width:209px; height: 74px; display:block; text-indent:-9999px; overflow:hidden;}

HTML 

<nav class="menu-main-nav-container"><ul id="menu-main-nav" class="nav-bar"><li id="menu-item-17" class="shop menu-item menu-item-type-post_type menu-item-object-page menu-item-17"><a href="http://www.goodmorningmoon.ca/shop/">Shop</a></li>
<li id="menu-item-16" class="services menu-item menu-item-type-post_type menu-item-object-page menu-item-16"><a href="http://www.goodmorningmoon.ca/services/">Services</a></li>
<li id="menu-item-18" class="blog menu-item menu-item-type-post_type menu-item-object-page menu-item-18"><a href="http://www.goodmorningmoon.ca/blog/">Blog</a></li>
<li id="menu-item-15" class="contact menu-item menu-item-type-post_type menu-item-object-page menu-item-15"><a href="http://www.goodmorningmoon.ca/contact/">Contact</a></li>
</ul></nav>

Ответы [ 2 ]

3 голосов
/ 12 марта 2012

Вы должны добавить плавающее предсказание в селектор li. Попробуйте это. 

.nav-bar li {display: inline; font-size: 2.66em; float: left;}

Добавление некоторого поля тоже может помочь

и не забудьте создать div с clear: оба css proriety после меню

1 голос
/ 12 марта 2012

try

  • (*) IE исправления 
  .nav-bar li{
       display: inline-block;
       *display: inline;
       *zoom: 1;
    }
...