创建导航栏 - 将两个li元素彼此相邻放置

Question

基本上我正在尝试创建一个导航栏，我试图将两个（和更多）li元素彼此相邻放置，我试图找出它但似乎无法做到这一点？ ？

css低于...... html低于css

甚至不知道我是否已经正确地解决了这个问题，如果你知道一个教程或者其他事情要做同样的事情让我知道我已经花了几天时间弄清楚如何正确设置.....

CSS

li {
list-style-type:none;
list-style:none;
background:clear;
padding:0;
margin:0;

}

ul {
list-style-type:none;
list-style:none;
margin:0;
padding:0;
background-color:clear;
}

li.nav a {
text-align:center;
font-family:"Helvetica";
font-weight:lighter;
text-decoration:none;
display:inline;
background-color:green;
padding:10px;
margin:0;
color:#FF0;
float:none;
}

li.nav a:hover {
text-align:center;
font-family:"Helvetica";
font-weight:lighter;
text-decoration:none;
display:inline;
background-color:blue;
padding:10px;
margin:0;
color:#0FF;
}

li.sub a {
position:relative;
top:2px;
background:pink;
display:block;
margin:0;
padding:10px;
color:red;
width:100px;
}

li.sub a:hover {
position:relative;
top:2px;
background:pink;
display:block;
margin:0;
padding:10px;
color:red;
width:100px;
}

HTML

<li class="nav"><a href="#">Community</a>
<ul>
<li class="sub"><a href="#">Third Age</a></li>
<li class="sub"><a href="#">Tide Timetables</a></li>
<li class="sub"><a href="#">Schools</a></li>
<li class="sub"><a href="#">Religion</a></li>
<li class="sub"><a href="#">Clubs+Societies</a></li>
<li class="sub"><a href="#">Courses</a></li>
<li class="sub"><a href="#">The Council</a></li>
<li class="sub"><a href="#">Culture</a></li>
</ul>
</li>

<!--END OF COMMUNITY SECTION-->

<!--START OF EVENTS NAVIGATION BUTTON AND SUBMENU-->

<li class="nav"><a href="#">Events</a>
<ul>    
<li class="sub"><a href="#">Festivals</a></li>
<li class="sub"><a href="#">Family</a></li>
<li class="sub"><a href="#">Music</a></li>
<li class="sub"><a href="#">Comedy</a></li>
<li class="sub"><a href="#">Theatre</a></li>
<li class="sub"><a href="#">Exhibitions</a></li>
<li class="sub"><a href="#">Film</a></li>
<li class="sub"><a href="#">Literature</a></li>
</ul>
</li>

<!--END OF EVENTS SECTION-->

Answer 1

添加浮动：左;对于物品。

li
{
  float:left;
}

<强> DEMO

Answer 2

您可以将display:inline-block级别属性用于所有li元素。

Answer 3

尝试在css中添加此行。

li.nav{display:inline-block;position:absolute;}
li.nav:nth-child(2)
{margin-left:140px;}

或

<强> HTML

<div class="main-navigation">
    <nav class="navigation">
        <ul>
             <li>1
                <ul class="sub-menu"><li>1a</li><li>1b</li></ul>
             </li>
             <li>2
                <ul class="sub-menu"><li>2a</li><li>2b</li></ul>
             </li>
             <li>3</li>
             <li>4</li>
        </ul>
    </nav>
</div>

<强> CSS

nav.navigation{
width: 75%;
height:50px;

}
nav ul ul.sub-menu{
display: none;
margin-left:-40px;
margin-top:-10px;   
}

nav ul li:hover > ul.sub-menu{
display: block;
}

nav ul{
height:50px;
list-style:none;
padding: 3px 0 0 0;
position: relative;
text-transform: uppercase;
}

nav ul:after{
content:""; 
clear:both; 
display:block;
}

nav ul li{
float: left;
padding:10px 30px;
background:yellow;
margin-left:5px;
}

nav ul ul.sub-menu{
background-color: #fcfcfc; 
padding: 0;
position: absolute; 
z-index:100;
top: 100%;
}

nav ul ul.sub-menu li{
float: none; 
margin-top: -3px;
height:30px;
background-color:green; 
}

DEMO是here