div와 UL의 위치 지정

Question

내 사이트에서 가로 메뉴를 만들려고합니다. 아이디어는 이런 방식으로 레이아웃을 갖는 것입니다 ---- O ---- 여기서 -는 메뉴의 링크이고 O는 페이지 중간에있는 그림이므로 두 개의 목록이 왼쪽과 오른쪽, 그림 주위에 있습니다.

내가

<div class="prima"> 
    <ul class="prima_lista"> 
     <li><a href="#">primo</a></li> 
    </ul> 
</div> 
<div class="seconda"> 
    <ul class="seconda_lista"> 
     <li><a href="#">secondo</a></li> 
    </ul> 
</div> 

다음 HTML을 만든 내가 모든 것을 정리됩니다 CSS를 만들었습니다

.prima{ 
position:absolute; 
top:400px; 
width:50%; 
left:-70px; 
border:1px solid red; 
} 
.seconda{ 
position:absolute; 
top:400px; 
width:50%; 
right:-70px; 
border:1px solid green; 
} 

ul.prima_lista { 
margin:0 auto; 
list-style:none; 
text-align:right; 
border:1px solid blue; 
} 

ul.seconda_lista { 
margin:0 auto; 
list-style:none; 
text-align:left; 
border:1px solid blue; 
} 

ul.prima_lista li { 
display:inline-block; 
border:1px solid gray; 
} 

ul.seconda_lista li { 
display:inline-block; 
border:1px solid gray; 
} 

ul.prima_lista li a { 
text-decoration:none; 
color:#000; 
font-size:18px; 
} 

ul.seconda_lista li a { 
text-decoration:none; 
color:#000; 
font-size:18px; 
} 

큰 문제가되는 최초의 UL/리튬이 완벽하게 작동하면서 div의 오른쪽 가장자리에 잘 정렬되어 있습니다 ... 두 번째 대신 UL과 DIV 여백 사이에 공백이 있어야합니다. 이 공간을 없애는 방법이 있습니까? 아무리

얼마나 나는이 수수께끼를 해결하는 방법을 찾을하지 않은 시도 -> http://jsfiddle.net/7voe8jea/

은 --- 나는 jsfiddle에 대한 링크를 업데이트했습니다. 우선 그게 효과가 없었고 두 번째 이유는 내가 자신을 아주 잘 설명하지 않았기 때문이죠. 내가 뭘하고 싶은지 첫 번째 div의 오른쪽 가장자리에 정렬 된 것처럼 div 왼쪽에 두 번째 ul "밀어"것입니다.

Answer 1

div라는 ID를 사용하여 클래스를 사용하는 것을 보았습니다. 그래서 나는 그것을 ID로 바꿨고 CSS의 모든 부분 앞에 #을 붙였다.

<div id="lista"> 
<div id="prima_lista"> 
<ul id="prima_lista"> 
<li><a href="#">primo</a></li> 

</ul> 
</div> 
</div> 

그리고 CSS를이 도움이

#lista { 
position:absolute; 
height:60px; 
width:100%; 
top:400px; 
border:1px solid #000; 
} 
*/ 
#prima_lista{ 
position:absolute; 
top:400px; 
height:60px; 
width:50%; 
left:-70px; 
border:1px solid red; 
} 

ul.prima_lista { 
margin:0 auto; 
list-style:none; 
text-align:right; 
} 

ul.prima_lista li { 
display:inline-block; 
/* border-top:1px solid #dededc; */ 
/* padding-top:16px; 
padding-right:40px; */ 
} 

ul.prima_lista li a { 
text-decoration:none; 
color:#000; 
font-size:18px; 
} 

.seconda_lista{ 
width:50%; 
right:-70px; 
} 

ul.seconda_lista { 
margin:0 auto; 
list-style:none; 
text-align:left; 
} 

ul.seconda_lista li { 
display:inline-block; 
border-top:1px solid #dededc; 
padding-top:16px; 
padding-right:40px; 
} 

ul.seconda_lista li a { 
text-decoration:none; 
color:#000; 
font-size:18px; 
} 

희망 : 여기 여기

http://jsfiddle.net/fstxsd5g/1/ 작업과 JS에 대한 링크는 HTML입니다! Littleswany