您的位置:首頁> 實例代碼> CSS3實例

align-items:baseline 作用

2019-4-20 01:08| 作者: admin| 查看: 6073| 評論: 0|來自: 螞蟻部落

關于align-items屬性的基本用法可以參閱CSS align-items一章節。

本文僅對baseline屬性值做一下介紹,因為它有點與眾不同,盡管它出場機會可能相對少一些。

此屬性值表示基線對齊,代碼實例如下:

[HTML] 純文本查看 復制代碼运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.tlmhwf.tw/" />
<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;}

規定align-items屬性值baseline,規定基線對齊。

也就是元素中的文本都以第一個元素的文本的基線對齊。

簡單做一個基線示意圖如下:

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


鮮花

握手

雷人

路過

雞蛋

最新評論

返回頂部
浙江6十1开奖号码查询r