Question

我被要求为我的网站制作一个横向菜单，这实际上只是一个无序列表，这是必要的。但是我无法摆脱它的垂直状态＆＃34;。

目前这是我的列表本身的HTML代码;

<ul id="horizontaal">
        <li><a href="index.html">Index</a></li>
        <li><a href="mijnsoftware.html">Mijn Software</a></li>
        <li><a href="browsers.html">Browsers</a></li>
        <li><a href="registratie.html">Registratie</a></li>
    </ul>

在CSS中这是;

 ul li {
     background-color: grey;
     border: 5px solid #999999;
     list-style-type: none;
     margin-bottom: 5px;
     margin-top: 5px;
     text-align: center;
     padding: 3px;
     width: 10%;
     float: left;
     clear: both;
     width:150px;

 }
 ul  {
     margin-bottom: 70%;
     margin-right: 100px;
     float: left;

 }

对于特殊的水平列表：

 #horizontaal {
        width: 100%;
    }

#horizontaal li {
    width: 10%;
    margin-right: 0px;
    margin-left: 0px;
    float: left;
    display: inline;
}

要求列表占据屏幕宽度的100％左右。

http://i.imgur.com/6HEsS8m.png

编辑：

我没有注意到我的代码中有那么明显的错误，对不起，我应该在发布之前花更多时间;真诚的道歉。

至于代码，这就是我现在所拥有的：

ul li {
     background-color: grey;
     border: 5px solid #999999;
     list-style-type: none;
     margin-bottom: 5px;
     margin-top: 5px;
     text-align: center;
     padding: 3px;
     width: 150px;



 }
 ul  {
     margin-bottom: 70%;
     margin-right: 100px;
     float: left;

 }

#horizontaal {
    width: 100%;
}

#horizontaal li {
    width: 10%;
    margin-right: 0px;
    margin-left: 0px;
    display: inline;

}

我的列表似乎现在水平对齐，但我的练习陈述如下：＆＃34;使列表项浮动。列表本身可能不会浮动。＆＃34;但是，我已经阅读过内联显示不能与float一起发表的评论吗？

Answer 1

你试试这个CSS代码使菜单水平。

ul{list-style-type:none;}
ul li{display:inline-block; background-color:#ef8913; padding:5px;}
ul li a{ color:blue}

 <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
  </ul>

这是工作链接。 http://jsbin.com/kunavupa/1/edit

Answer 2

试试这个jsfiddle。

您所做的唯一问题是，您在每个float: left和ul上都有li，正好解决了这个问题。

Answer 3

您需要设置显示属性。其他可能的显示选项：是（内联块，块等）。我用

ul li {

显示：块

}

（新）制作水平列表

3 个答案: