带有UL内部的div的定位

Question

我正在尝试在我的网站上创建一个水平菜单。 想法是通过这种方式进行布局---- O ----其中-是菜单的链接，而O是放在页面中间的图片，因此这两个列表位于左侧并在右侧和图片周围。

我已经创建了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 / li可以完美工作并在div的右边缘很好地对齐...而第二个ul / li则在UL和DIV边距之间存在一些间距。 有消除这种空间的方法吗？

无论我尝试多少，我都没有找到解决这个谜题的方法-> http://jsfiddle.net/7voe8jea/

---我已经更新了jsfiddle的链接。 首先，因为它没有用……其次，因为我认为自己的解释不够好。 我想做的是将第二个ul“推”到div的左侧，就像第一个ul对齐到第一个div的右边缘一样。

Answer 1

我看到的是，使用div的id作为类。 所以我将其更改为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