Question

我将这个css用于我的垂直菜单：

.vertical-nav{
    width:200px;
    height:auto;
    list-style:none;
    float:left;
    margin-right:40px;
}
.vertical-nav li{
    width:200px;
    height:25px;
    margin:5px;
    padding:5px;
    background-color:#666666;
    border:none;
    text-align:center;
    float:left;
}
.vertical-nav li:hover{
    background-color:#f36f25;
    color:#FFFFFF;
}
.vertical-nav li a{
    font-family:Calibri, Arial;
    font-size:18px;
    font-weight:bold;
    color:#ffffff;
    text-decoration:none;
}
.vertical-nav li.current {
    background-color:#F36F25;
}
.vertical-nav li.current a {
    color:#FFFFFF;
}

这是我的HTML：

<ul class="vertical-nav">
<li><a href="index.php">Home</a></li>
<li><a href="staff.php">Staff</a></li>
<li><a href="invoices.php">Invoices</a></li>
<li><a href="tickets.php">Tickets</a></li>
<li><a href="openticket.php">Open Ticket</a></li>
</ul>

什么是使链接显示水平的最佳方法？

Answer 1

如果将.vertical-nav的宽度更改为例如100％，则li：s将水平浮动。导航的宽度必须足以为所有人腾出空间，否则他们会相互排列。

Answer 2

我删除了width:200px;＆amp;来自float:left的{{1}}并在.vertical-nav上将float:left;更改为display:inline-block;

Demo

.vertical-nav li

Answer 3

尝试更改.vertical-nav

的宽度

.vertical-nav{
    height:auto;
    list-style:none;
    float:left;
    padding:0;
    width:1100px;
}

工作demo

Answer 4

将此添加到li

.vertical-nav li{
    ...
    display:inline;
    /*or */
    display:inline-block;
    ...
}

Answer 5

你所写的是正确的。您只需要将第一个css更改为包含ul：

.vertical-nav ul {

rather than:

.vertical-nav {

And it's done :)

Answer 6

您不应设置相同的容器宽度，并尝试设置容器宽度自动

      .vertical-nav{

       width:auto;
       list-style:none;
       margin-right:40px;
       }

如何将垂直css菜单更改为水平

6 个答案: