align-items:baseline 作用

2019-4-20 01:08| 作者: admin| 查看: 1626| 评论: 0|来自: 蚂蚁部落

关于align-items属性的基本用法可以参阅CSS align-items一章节。

本文仅对baseline属性值做一下介绍，因为它有点与众不同，尽管它出场机会可能相对少一些。

此属性值表示基线对齐，代码实例如下：

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
ul{
  width: 400px;
  height: 150px;
  background-color: #ccc;
  display: flex;
  align-items:baseline;
}
ul li {
  width:100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  margin: 10px;
  background-color: pink;
  list-style:none;
}
 li:last-child {
  line-height: 150px;
}
</style>
</head>
<body>
<ul>
  <li>x</li>
  <li>y</li>
  <li>z</li>
</ul>
</body>
</html>

代码运行效果截图如下：

$a:3:{s:3:\"pic\";s:43:\"portal/201904/20/010958ae7yidd3de7qka7d.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}$