您的位置：首页 > Web前端 > CSS

CSS：inline-block的使用方法

2017-07-23 13:34 525 查看

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： CSS-inline

相关文章推荐

新的分享

章节导航