CSS 并排显示 ul li
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11280031/
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
display ul li side by side
提问by Grant
I'm trying to display a drop down part of a menu side by side instead of top to bottom. I have to display: none to make the menu work, and float: left isn't doing it. I'm out of ideas and not sure what else to do needing the display: none to be there to hide the list until it needs to show. I've thrown float: left pretty much everywhere. The CSS:
我正在尝试并排显示菜单的下拉部分，而不是从上到下显示。我必须显示：none 才能使菜单工作，而 float: left 没有这样做。我没有想法，不知道还有什么需要显示：没有人在那里隐藏列表，直到它需要显示。我已经抛出浮动：几乎无处不在。CSS：
ul {
margin: 0;
padding: 0;
list-style-type: none;
min-width: 200px;
float: left;
display: inline;
}
ul#navigation {
float: left;
}
ul#navigation li {
float: left;
border: 1px black solid;
min-width: 200px;
}
ul.sub_navigation {
position:absolute;
float: left;
display: inline;
display: none;
}
ul.sub_navigation li {
clear: both;
float: left;
display: inline;
}
a,a:active,a:visited {
display: block;
padding: 10px;
}
The HTML:
HTML：
<div id="menu">
<ul id="navigation">
<li class="dropdown"><a href="javascript:ajaxpage('home.php', 'body');">Home</a></li>
<li class="dropdown"><a href="javascript:ajaxpage('projects.php', 'body');">Projects</a>
<ul class="sub_navigation" style="float: left;">
<!-- pull projects with P H P -->
<li><a href="javascript:ajaxpage('openproj.php?id=<? echo $row['id']; ?>', 'body');"><? echo $row['name']; ?></a></li>
<li><a href="javascript:ajaxpage('createproj.php', 'body');">Add a project</a></li>
<?php
}
?>
</ul>
</li>
<li class="dropdown"><a href="javascript:ajaxpage('pubfiles.php', 'body');">Public Files</a></li>
<li class="dropdown"><a href="javascript:ajaxpage('users.php', 'body');">Users</a></li>
<li class="dropdown"><a href="javascript:ajaxpage('settings.php', 'body');">Settings</a></li>
<!-- only pull if admin and logged in per P H P session-->
<li class="dropdown"><a href="javascript:ajaxpage('admin.php', 'body');">Admin</a></li>
</ul>
</div>
回答by Polash
You Can implement your HTML and CSS code this way, then It will work properly.
你可以用这种方式实现你的 HTML 和 CSS 代码，然后它就会正常工作。
HTML:
HTML：
<div class="menu">
<ul>
<li><a href="index.html" class="active">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="about.html">Services</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="contact.html">Contact us</a></li>
</ul>
</div>
CSS:
CSS：
.menu {
padding:0;
margin:0;
width:400px;
float:left;
}
.menu ul {
padding:0;
margin:0;
list-style:none;
border:0;
float:left;
}
.menu ul li {
float:left;
margin:0;
padding:0;
border:0;
}
.menu ul li a {
float:left;
margin:0;
padding:13px 10px;
text-decoration:none;
border:1px
solid #000;
}
回答by Grant
It seemed that putting width=auto;in both the ul liand its child, as well as changing the child positioning to relative, made it work the way I needed it to.
似乎同时放入width=auto;theul li和它的 child，以及将 child 定位更改为relative，使它按照我需要的方式工作。
I appreciate everyone's input as it brought me to being one step closer to being done with this and learning a lot more about this site, and css with jquery.
我感谢每个人的投入，因为它让我离完成这项工作又近了一步，并了解了更多关于这个网站的信息，以及 css 和 jquery。
Link: jsFiddle
链接：jsFiddle
