UL與UL內定位

我想在我的網站上創建一個水平菜單。這個想法是以這種方式進行佈局---- O ----其中 - 是菜單的鏈接，O是放在頁面中間的圖片，所以這兩個列表位於左邊和右邊，周圍是圖片。UL與UL內定位

我創建了HTML

<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>

然後我創建了將組織一切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。首先因爲它沒有工作......第二，因爲我認爲我沒有很好地解釋自己。我想要做的是將第二個ul「推」到div的左側，就像第一個ul對齊到第一個div的右邊緣一樣。

來源

2014-08-29 user3933456

我甚至不能在你的jsFiddle中看到列表？ – melancia 2014-08-29 10:29:47

爲什麼不使用'display：inline'作爲所有項目，將它們粘貼到一個容器中？ – melancia 2014-08-29 10:31:19

是這樣的嗎？ http://jsfiddle.net/MelanciaUK/fstxsd5g/2/ – melancia 2014-08-29 10:38:44

我看到，而不是使用一個ID爲您使用類的div。所以我把它改成了一個id，並且在css中用＃加上了前綴。下面是對JS的鏈接與它一起工作http://jsfiddle.net/fstxsd5g/1/

下面是HTML：

<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; 
}

希望這有助於！ Littleswany

來源

2014-08-29 10:33:43 littleswany

UL與UL內定位

回答

相關問題