Question

如何将垂直菜单转换为水平菜单？下面给出的代码中的哪一行对此负责？

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;
}

我找到了答案here。正是我想知道的：

“首先，取出所有”宽度“的提及。您将希望您的菜单跨越您的页面，而不是限制在当前版本的180px。

接下来，我们需要告诉

元素彼此串联，而不是从上到下堆叠。因此，添加display：inline to #vertmenu li。

在那之后，我们需要告诉要素跟进。因此，删除display：block from #vertmenu li a decleration。 “

Answer 1

将display:block;更改为

  display:inline;

Answer 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宽度。删除它。

简单example

Answer 3

更改列表的样式为（例如：无序），您也可以使用列表的类或ID进行样式设置。

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

并将 li的样式更改为内联屏蔽

li{
    display: inline-block;
}

Answer 4

li {
  display: inline;
}

而不是整个内容显示在内尝试隔离。

CSS：将垂直菜单转换为水平菜单

4 个答案: