2

私の垂直メニューにこの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>

リンクを水平に表示するにはどうすればよいでしょうか?

4

6 に答える 6

0

これをliに追加

.vertical-nav li{
    ...
    display:inline;
    /*or */
    display:inline-block;
    ...
}
于 2013-05-09T00:25:22.987 に答える
0

width:200px;&float:leftを削除してon に.vertical-nav変更float:left;しましたdisplay:inline-block;.vertical-nav li

デモ

.vertical-nav{
    height:auto;
    list-style:none;
    margin-right:40px;
}
.vertical-nav li{
    width:200px;
    height:25px;
    margin:5px;
    padding:5px;
    background-color:#666666;
    border:none;
    text-align:center;
    display:inline-block;
}
.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;
}
于 2013-05-09T00:24:46.650 に答える
0

の幅を変更してみてください.vertical-nav 

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

動作デモ

于 2013-05-09T00:25:06.130 に答える
0

あなたが書いたことは正しいです。最初の css を変更して ul を含めるだけです。

.vertical-nav ul {

rather than:

.vertical-nav {

And it's done :)
于 2013-05-09T00:28:42.030 に答える
0

コンテナの幅を同じに設定してはいけません。コンテナの幅を自動に設定しようとします

      .vertical-nav{

       width:auto;
       list-style:none;
       margin-right:40px;
       }
于 2013-05-09T00:30:57.183 に答える