Html CSS：将垂直菜单转换为水平
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10514398/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS: Convert vertical menu to horizontal
提问by Klausos Klausos
How to convert the vertical menu into horizontal? Which lines in the below-given code are responsible for this?
如何将垂直菜单转换为水平菜单？下面给出的代码中的哪些行对此负责？
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;
}
I found the answer here. Exactly what I wanted to know:
我在这里找到了答案。正是我想知道的：
"First, take out all the mentions of a "width". You're going to want your menu to span your page not be restricted to the 180px in the current version.
“首先，去掉所有提到的“宽度”。在当前版本中，您将希望菜单跨页面不限于 180 像素。
Next, we need to tell the
接下来，我们需要告诉
After that, we'll need to tell the elements to follow suit. So, remove display:block from the #vertmenu li a decleration. "
在那之后，我们需要告诉元素效仿。因此，从 #vertmenu li a decleration 中删除 display:block。”
回答by
change display:block;to
更改display:block;为
display:inline;
回答by huMpty duMpty
Try adding
尝试添加
li
{
display:inline;
}
also in your code
也在你的代码中
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%;
}
Here you setting the lito ulwidth. Remove that.
在这里，您设置li到ul宽度。去掉那个。
Simple example
简单的例子
回答by erluxman
Changethe style of your list to ( for eg: unordered), You can style with the class or id of that list too.
将列表的样式更改为（例如：unordered），您也可以使用该列表的类或 id 进行样式设置。
ul{
white-space: nowrap;
overflow-x: auto;
}
And change the style of lito be an inline-block
并更改里的风格是一个inline-block的
li{
display: inline-block;
}
回答by Pax
li {
display: inline;
}
and not the whole thing into display:inline try isolate.
而不是整个事情进入显示：内联尝试隔离。
