9.1 让多个元素的一行显示的方法

  • display:inline; // 转换为行内元素 但是设置宽高属性之后不起作用
  • display:inline-block; // block可以让元素在一行显示，但是他会受空格/换行建，会产生默认间距
    • 去掉空格和换行建的影响 让标签都在一行 (不推荐 阅读性不好)
    • 给父元素增加一个 font-size:0，然后给子元素增加一个 font-size:14px;（但是我们还会发现一个问题:元素里面如果有文字 文字消失，然后在子元素增加一个属性即可）
  • float:left/rigjt; // 但是我们清浮动

[display:inline-block元素的特点]

  • 让盒子横向排列
  • vertiacal-align 属性会影响到inline-block元素，你可能会把他的值设置为top
  • 你需要设置每一列的宽度
  • 如果html源代码中元素之间有空格，那么列与列之间会产生空隙
  1. *{
  2.     margin:0px;
  3.   padding:0px;
  4. }
  6. .content1{
  7.     display:inline;
  8.   width:200px;
  9.   height:100px;
  10.   backgournd-color:yellow;
  11. }
  13. .content2{
  14.     display:inline;
  15.   width:200px;
  16.   height:100px;
  17.   backgournd-color:yellow;
  18. }
  20. ...
  22. <div class="content1">内容1</div>
  23. <div class="content2">内容2</div>

inline-block 在ie7 不兼容

直接让块元素设置为内联对象呈递（设置属性display:inline），然后触发块元素的layout（如：zoom:1 或float属性等）。代码如下

  1. /*推荐:IE6、7*/ 
  2. div {
  3.   display:inline-block;
  4.   *zoom:1;
  5.   *display: inline;
  6. }
  8. /*推荐*/
  9. div {
  10.    display:inline-block;
  11.    _zoom:1;
  12.    _display:inline;
  13. }

解释: display:inline-block照顾的是ie8+的浏览器，这是正常的设置，在低版本的ie设置下行内块有2个条件，一个行内，一个设置宽高，触发layout即可设置宽度，而div设置了宽度后还是会黄航，layout不是为了水平而设置，所以为了块级元素转行内块上加上”display:inline”属性，但是display:inline不会触发layout，于是加上zoom:1重新触发layout，于是形成了一个跨域设置宽高的行内元素