为了账号安全,请及时绑定邮箱和手机立即绑定

div和ul定位问题

div和ul定位问题

  <body>    <div id="top">       <ul id="left">         <li class="line">|</li>         <li><a href="#">宝箱</a></li>         <li><a href="#">换肤</a></li>         <li><a href="#">消息</a></li>       </ul>       <ul id="right">         <li><a href="#">糯米</a></li>         <li><a href="#">新闻</a></li>         <li><a href="#">hao123</a></li>         <li><a href="#">地图</a></li>         <li><a href="#">视频</a></li>         <li><a href="#">贴吧</a></li>         <li><a href="#">happy魏帆</a></li>         <li><a href="#">设置</a></li>       </ul>    </div>  </body>CSS:代码:body{  margin:0px;  padding:0px;  font-size:12px;  color:darkgray;}#top{  width:100%;  height:39px;  border-bottom:1px solid gainsboro;}<!将重直序列变为水平>ul{  list-style-type:none;}li{  display:inline-block;  margin-top:12px;}a{  margin-right:12px;  color:dimgray;}#left{  position:left;  margin:0px 0px 0px 15px;  padding:0px;}为什么#right总显示在div的下面,不能与#left平行呢?如果不设置#left的内边距和外边距为0的情况下,div的高度会自动增加,这是为什么?设置了div的高度,为什么不能使用margin:0 auto,使元素重直居中呢?
查看完整描述

3 回答

?
团酱

TA贡献16条经验 获得超10个赞

1、#left定位错了。position只有absolute、relative、static、fixed、inherit和initial,没有left。

#left{
    float:left;
    margin:0px 0px 0px 15px;
    padding:0px;
}

2、#left设置了float浮动或者position定位之后,相对于body来进行定位,而#right是根据html来进行定位。看图

5835551b00012a7005000477.jpg

5835551b0001634205000509.jpg

583555390001e9fe05000400.jpg

3、垂直居中不是用margin来设置的,margin: 0 auto;可以用于左右居中。可以设置line-height: 39px;来进行垂直居中。

查看完整回答
1 反对 回复 2016-11-23
?
天生我才必有用哈

TA贡献2条经验 获得超1个赞

  1. ul是块元素,默认是占整行的

  2. ul有默认的内边距和外边距,不设置为0会撑开的

  3. margin:0 auto是水平居中的设置

查看完整回答
1 反对 回复 2016-11-23
?
Doit的信仰

TA贡献44条经验 获得超11个赞

定位用错了,

#left{

    position:absolute;

    left:0px;

    top:0px;

}

#right{

    position:absolute;

    right:0px;

    top:0px;

}


查看完整回答
1 反对 回复 2016-11-23
  • 3 回答
  • 0 关注
  • 3044 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信