Меню стиля списка не отображается в строке - PullRequest
Новая
       3

Меню стиля списка не отображается в строке

0 голосов
/ 29 января 2012

Здесь вы можете увидеть код: http://jsfiddle.net/LQSK3/1/

Я не могу заставить display: inline; работать там для каждого li элемента.Также есть проблема ширины line.png изображения, так как его высота равна высоте шрифта, я хочу, чтобы 35px высота с margin left и right было установлено на 5px.

Где проблема?

Ответы [ 2 ]

3 голосов
/ 29 января 2012

Вам необходимо обновить таблицу стилей.Пожалуйста, добавьте этот новый стиль: 

#menu {
  position: relative;
  clear: both;
  top: -3px;
  background-color: coral;
  border: 1px solid black;
  width: 800px;
  height: 35px;
  float:left;
}

li { display: inline;float:left; }

#menu ul {
   position: absolute;
   font-family: Century Gothic, sans-serif;
   font-size: 14px;
   list-style-type: none;
   padding: 0;
   margin: 9px 0 0 123px;
   width: 649px;
   height: 39px;
   color: #FFF;
   float:left;
}

a { font-weight: bold; color: red; text-decoration: none; }
a:hover { text-decoration: underline; }

#menu a {
background: url('http://i.imgur.com/rzNj0.png') top right no-repeat;
width: 65px;
height: 18px;
float: left;
margin: 0px 5px;
}

Вам нужно добавить float: left;в меню div, ul, li и a.Также следует установить ширину, высоту и поля тега.

Вот рабочий пример: http://jsfiddle.net/YjeBs/

Надеюсь, что это поможет:

Если вы хотите, чтобы ваша строка проходила сверху вниз в div меню, вы можете изменить свои стили на: 

#menu {
   position: relative;
   clear: both;
   top: -3px;
   background-color: coral;
   border: 1px solid black;
   width: 800px;
   height: 35px;
   float:left;
}

li { 
float: left;
    height: 35px; 
    display:inline;
}

#menu ul {
color: #FFFFFF;
    float: left;
    font-family: Century Gothic,sans-serif;
    font-size: 14px;
    height: 35px;
    list-style-type: none;
    margin: 0 0 0 123px;
    padding: 0;
    position: absolute;
    width: 649px;
 }

 a { font-weight: bold; color: red; text-decoration: none; }
 a:hover { text-decoration: underline; }

 #menu a {
background: url("http://i.imgur.com/rzNj0.png") no-repeat scroll right top transparent;
    float: left;
    height: 29px;
     margin: 0 5px;
    padding-top: 8px;
    width: 65px;
 }

Надеюсь, что вы хотите:

0 голосов
/ 29 января 2012

просто измените li { diplay: inline; } с li { display: inline; }, это работает.

...