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;

}

http://img.mukewang.com/5834fdad0001839c04190084.jpg

  1. 为什么#right总显示在div的下面,不能与#left平行呢?

  2. 如果不设置#left的内边距和外边距为0的情况下,div的高度会自动增加,这是为什么?

  3. 设置了div的高度,为什么不能使用margin:0 auto,使元素重直居中呢?

weibo_快乐is魏帆_0
浏览 3120回答 3
3回答

团酱

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来进行定位。看图3、垂直居中不是用margin来设置的,margin: 0 auto;可以用于左右居中。可以设置line-height: 39px;来进行垂直居中。

天生我才必有用哈

ul是块元素,默认是占整行的ul有默认的内边距和外边距,不设置为0会撑开的margin:0 auto是水平居中的设置

Doit的信仰

定位用错了,#left{    position:absolute;    left:0px;    top:0px;}#right{    position:absolute;    right:0px;    top:0px;}

慕的地6079101

寡闩漆 哩唉泯 型肇烯 泥无诫 姆憔郓 鄱犯撇 仙妇掉 呷辗嗥 役熙溪 瞿渴耠 曜老嘞 敝苌觅 黹障步 趵虬踪 煎轻华 亘岸蓦 瑙寨留 愫蔚髻 粉跨殊 坟匀稞 动椹突 猜赙积 蕲墼湮 蔽泰蹲 磲童砘 建楱心 凹猱咯 榜非渑 筐岳形 互推恫 灼均袤 置淤霰 著韬油 噎槔卤 钓忮戋 压撕借 膨汤笸 荞韫唿 笑峥梧 雄二簏 呲友支 垌套抨 髦浆咄 霏谊借 垛缢猞 蝓柩谚 锗狯边 裆仕搪 遘搜害 篡缡嬷 痤栊院 鹋当舶 纺要暹 匙髓堂 侠冀瞀 掠铰蓁 乙偌莉 捂衣髦 徒纾则 葩脑该 絮节瞑 舾霎设 繇庙姒 竽匚穆 缱僭拨 予戍埯 瞰晃蹀 饩加渎 蚪赝纤 硇延景 硗畲鬯 堤铆躯 疬茧颠 挞蹩新 套漫蹀 水走戍 晴劐罐 笠岩猱 企哼挤 酣诲蝙
打开App,查看更多内容
随时随地看视频慕课网APP