탐색 모음 만들기 - 서로 옆에있는 두 개의 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

이 줄을 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; 
} 

데모는,162입니다

Answer 2

float : left; li-items에.

li 
{ 
    float:left; 
} 

DEMO

Answer 3

모든 li 요소에 display:inline-block 수준의 속성을 사용할 수 있습니다.