html - 如何将垂直的CSS菜单更改为水平的-6ren

html - 如何将垂直的CSS菜单更改为水平的

转载作者：行者123 更新时间：2023-11-28 03:32:56

<分区>

我将此 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>

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