列表样式菜单未显示在行中

Question

您可以在此处看到代码：http://jsfiddle.net/LQSK3/1/

我无法让display: inline;为每个li元素工作。 同样问题宽度为line.png图片，因为它的高度与字体高度相同，我希望它的高度为35px，margin left和right设置为{ {1}}。

问题出在哪里？

Answer 1

您需要更新样式表。请添加这种新风格：

#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;
 }

希望这是你想要的：）

Answer 2

只需更改li { diplay: inline; } li { display: inline; }即可。