博客

CSS：inline-block的使用方法

  • Post author:
  • Post category:其他


CSS：inline-block的使用方法

inline-block类型是在CSS2.1中追加的一个盒类型。目前为止，它受到了Safari浏览器、Opera浏览器、Chrome浏览器、Firefox浏览器以及IE8以上版本浏览器的支持。

inline-block属性的三种用法


  1. 块级元素的并排显示：

    在进行网站开发的过程中，经常使用float或position使得元素在一行内进行并排显示，这两种属性无疑会使样式变得非常复杂。这时就可以使用

    display:inline-block

    属性来使块级元素在一行内呈现。相比于前两种方法，inline-block的方法要更简单。


  2. 给行内元素设置宽高：

    众所周知，块级元素可以设置宽度和高度，而行内元素则无法设置宽度和高度，但是在开发时总会有需要为输入框、按钮等行内元素设置宽度和高度的时候，此时就可以为这些行内元素使用inline-block属性使其可以设置宽度和高度，还包括上下外边距、上下内边距等块级元素才有的属性。

    设置inline-block属性后，除了没有换行功能外，该元素和块级元素已经没有太大的区别。

    使用inline-block属性，元素在垂直方向上的默认对齐方式是底对齐，通常来说我们都希望元素是顶对齐的，这样显得比较美观，并且

    为了避免使用inline-block属性的元素排列混乱，还应设置

    vertical-align:top

    或所需的属性。


    未消除换行符

    这个空白的大小是6px，所以如果需要消除空白，就需要设置

    margin-right:-6px

    让该元素的下一相邻元素向左移动移动6px，最终达到如下图所示的效果:

    消除换行符


  3. 显示水平菜单：

    inline-block属性还可以用来显示水平菜单，

    将li设置为

    display:inline-block

    ，

    其原本的

    list-item

    属性就会被改写，不再具有块级元素的换行功能，从而

    实现水平排列

    ，同时还可以去除列表项目的“·”标记。

给行内元素设置inline-block的完整代码如下所示：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>inline-block</title>
  <style>
    .i_b {
      display: inline-block;
      vertical-align: top;
      box-sizing: content-box;
      height:20px;
      margin-right: -6px;
      border:thin solid #aaa;
      padding:5px;
    }
    .search {
      width:200px;
    }
    .search_btn {
      width:50px;
    }
  </style>
</head>
<body>
  <input type="text" class='i_b search' name="search" />
  <button class='i_b search_btn'>搜索</button>

</body>
</html>