使用UL定位div

时间:2014-08-29 10:23:15

标签: html css

我正在尝试在我的网站上创建一个水平菜单。 这个想法是以这种方式进行布局---- 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和DIV边缘之间存在一些空格。有没有办法消除这个空间?

无论我尝试多少,我都找不到解决这个谜语的方法 - &gt; http://jsfiddle.net/7voe8jea/

---我已经更新了jsfiddle的链接。首先,因为它不起作用......第二,因为我认为我没有很好地解释自己。我想做的是将第二个ul“推”到div的左边,就像第一个ul与第一个div的右边缘对齐一样。

1 个答案:

答案 0 :(得分:1)

我看到了那个使用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