1

垂直メニューを水平に変換するにはどうすればよいですか？以下に示すコードのどの行がこれに関与していますか？

ul#vertmenu {
    list-style: none outside none;
    margin: 0;
    padding: 0;
    width: 200px;
}
ul#vertmenu li {
    background: none repeat scroll 0 0 #FFFFFF;
    border-bottom: 1px solid #FFFFFF;
    float: left;
    font: bold 11px/16px arial,helvetica,sans-serif;
    position: relative;
    width: 100%;
}
ul#vertmenu li ul li {
    background: none repeat scroll 0 0 #FFCF8B;
}
ul#vertmenu li a {
    display: block;
    padding: 2px 3px;
}
ul#vertmenu li a:hover {
    background: none repeat scroll 0 0 #FFCF8B;
    border-left: 1px solid #FFFFFF;
    border-right: 1px solid #FFFFFF;
    color: #AA0000;
}
ul#vertmenu li ul li a:hover {
    background: none repeat scroll 0 0 #FFEDD3;
    border-left: 1px solid #FFFFFF;
}
ul#vertmenu ul {
    display: none;
    position: absolute;
    top: 0;
}
ul#vertmenu li:hover ul {
    display: block;
    left: 200px;
}

ここで答えを見つけました。まさに私が知りたかったこと：

「まず、「幅」についての言及をすべて取り除いてください。現在のバージョンでは、メニューがページ全体に180ピクセルに制限されないようにする必要があります。

次に、

  • 上から下にスタックするのではなく、互いに一列に並べる要素。したがって、display：inlineを#vertmenuliに追加します。

    その後、要素に従うように指示する必要があります。したがって、＃vertmenu li adeclerationからdisplay：blockを削除します。「」

    • 4

    4 に答える 4

    2

    display:block;に 変更

      display:inline;
    于 2012-05-09T10:41:42.613 に答える
    2

    追加してみてください

    li
{
display:inline;
}

    あなたのコードにも

     ul#vertmenu li {
    background: none repeat scroll 0 0 #FFFFFF;
    border-bottom: 1px solid #FFFFFF;
    float: left;
    font: bold 11px/16px arial,helvetica,sans-serif;
    position: relative;
    width: 100%;
}

    ここでは、liをul幅に設定します。それを削除します。

    簡単な例

    于 2012-05-09T10:53:12.920 に答える
    0

    リストのスタイルを（例：順序なし）に変更します。そのリストのクラスまたはIDを使用してスタイルを設定することもできます。

    ul{
        white-space: nowrap;
        overflow-x: auto;  
    }

    そして、liのスタイルをインラインブロックに変更します

    li{
    display: inline-block;
}
    于 2019-03-23T01:46:32.287 に答える
    0 
    li {
  display: inline;
}

    全部を表示するわけではありません。インラインで分離してみてください。

    于 2019-10-10T08:47:31.637 に答える