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

为什么我这三个列之间有那么明显的空隙呢?

为什么我这三个列之间有那么明显的空隙呢?

天窗的蚂蚁 2016-03-02 23:46:41
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>不定宽块状元素水平居中</title> <style> .container{text-align:center;} .container ul{list-style:none;margin:0;padding:0;display:inline;} .container li{margin:0;display:inline;} a{magin:0;background-color:red;} </style> </head> <body> <div class="container">     <ul>      <li><a href="#">line one</a></li>         <li><a href="#">line two</a></li>         <li><a href="#">line three</a></li>     </ul> </div> </body> </html>我的代码没错啊。为什么三个列没有紧挨着,而是彼此之间有那么大的空隙?空隙该怎么消除呢?除了把“<li>”都写在一行在外
查看完整描述

2 回答

?
李晓健

TA贡献1036条经验 获得超461个赞

你可以用float 来让他们显示在一行。

.container li{margin:0;display:inline; float: left}

或者给ul和li添加一个font-size

.container ul{list-style:none;margin:0;padding:0;display:inline;font-size: 0}
.container li{margin:0;display:inline;font-size: 16px}

或者把3个li写到同一行,不要换行

<li><a href="#">line one</a></li><li><a href="#">line two</a></li><li><a href="#">line three</a></li>

至于原因嘛,你可以去看一下慕课网张鑫旭老师的视频,哪一讲我忘了,他的课程也不多,课讲的也比较有意思,你可以去都看一下。有专门说到这个问题的。

查看完整回答
反对 回复 2016-03-03
  • 2 回答
  • 0 关注
  • 1342 浏览
慕课专栏
更多

添加回答

举报

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