CSS：inline-block的使用方法

最新推荐文章于 2024-04-09 16:28:52 发布

ma125120

最新推荐文章于 2024-04-09 16:28:52 发布

阅读量1.4k

点赞数 1

文章标签： CSS-inline

CSS：inline-block的使用方法

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

inline-block属性的三种用法

块级元素的并排显示：
在进行网站开发的过程中，经常使用float或position使得元素在一行内进行并排显示，这两种属性无疑会使样式变得非常复杂。这时就可以使用display:inline-block属性来使块级元素在一行内呈现。相比于前两种方法，inline-block的方法要更简单。
给行内元素设置宽高：
众所周知，块级元素可以设置宽度和高度，而行内元素则无法设置宽度和高度，但是在开发时总会有需要为输入框、按钮等行内元素设置宽度和高度的时候，此时就可以为这些行内元素使用inline-block属性使其可以设置宽度和高度，还包括上下外边距、上下内边距等块级元素才有的属性。设置inline-block属性后，除了没有换行功能外，该元素和块级元素已经没有太大的区别。

使用inline-block属性，元素在垂直方向上的默认对齐方式是底对齐，通常来说我们都希望元素是顶对齐的，这样显得比较美观，并且为了避免使用inline-block属性的元素排列混乱，还应设置vertical-align:top或所需的属性。

这个空白的大小是6px，所以如果需要消除空白，就需要设置margin-right:-6px让该元素的下一相邻元素向左移动移动6px，最终达到如下图所示的效果:
显示水平菜单：
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>

ma125120

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS：inline-block的使用方法

CSS：inline-block的使用方法 inline-block类型是在CSS2.1中追加的一个盒类型。目前为止，它受到了Safari浏览器、Opera浏览器、Chrome浏览器、Firefox浏览器以及IE8以上版本浏览器的支持。inline-block属性的三种用法块级元素的并排显示：在进行网站开发的过程中，经常使用float或position使得元素在一行内进行并排显示，这两种属性
复制链接

扫一扫