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 添加到#vertmenu li。

    之后，我们需要告诉元素效仿。因此，从#vertmenu li a decleration 中删除 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 的样式更改为inline-block

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

    而不是全部显示：内联尝试隔离。

    于 2019-10-10T08:47:31.637 回答