inline-block元素间的空白间距解决方案

对于inline-block间的空白问题一直觉得很头疼,尝试过几种解决办法,自己感觉都不是很满意,今天在这总结一下


  • 首页

  • 二手房

  • 新房

  • 租房

  • 业主




*{
margin: 0;
padding:0;
border: 0;
outline:0;
}
ul{
list-style: none;
text-align: center;
}
li{
display:inline-block;
padding: 0 15px;
background-color: #1c9b93;
}

这样写的效果是每个li元素跟下一个元素之间都有4px的间距,下面说一下解决办法:

方法一:改变Html的结构,结构分为好多种,每种都能达到效果
(1)

  • 首页
  • 二手房
  • 新房
  • 租房
  • 业主


好多人经常用这种方法,缺点是只能一行显示代码多的话会很难看而且很长,不易阅读;
(2)



  • 首页

  • 二手房

  • 新房

  • 租房

  • 业主



这种写法相比(1)就更易阅读,而且接近标签换行格式的写法;
(3)


  • 首页 >
  • 二手房 >
  • 新房 >
  • 租房 >
  • 业主



这种方法很相似,总结一下就是要让inline-block的标签首位相连不要换行;
(4)


  • 首页
  • 二手房
  • 新房
  • 租房
  • 业主

你可能感兴趣的:(css)