css行高元素的高(不确定,百分比)

html-css063

css行高元素的高(不确定,百分比),第1张

首先行高百分比的书写，百分比是针对字体大小进行设置的，也就是说如果你的文字大小为20px，那么100%就是20px，这个和你的需求不符合

其次，CSS当中也不能写成height/2的样子

那么，两种方案能够解决这个问题

1 改变标签的默认显示样式，然后使用vertical-align属性进行控制

<style>

.box {

width: 800px

height: 400px

border: 10px solid red

}

.demo {

float: left

display: table

width: 33%

height: 50%

border: 1px solid black

}

.demo > p {

display: table-cell

vertical-align: middle

}

</style>

<div class="box">

<div class="demo">

<p>新手书籍推荐：《HTML5布局之路》</p>

</div>

</div>

显示效果：

2 使用JS进行动态的样式设置（即通过JS动态的获取这个标签的高度，然后再通过 元素.style.lineHeight的方法来设置具体的行高值，当然，这种设置比第一种要麻烦的多）

目标效果：每一排都要顶部对齐

方法：1、块级元素行内显示：display: inline-block

        2、顶部对齐：vertical-align: text-top

实现步骤：

1、建立基本元素标签，并设置颜色区分， 设置不同高度来模拟你所说的高度不一致的情况

代码：

效果图：

2、换行：使每个li变成行内块级元素，宽度超过ul宽度时会自动换行

代码：

效果图：

3、顶部对齐：其实第二步已经做到了，是默认的顶部对齐，但经测试有时候不会顶部对齐，如：将文字去掉

所以加上一句：vertical-align: text-top更为保险了。

4、完整代码：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<style>

ul li{ list-style:none }

.myli {

width: 25px

margin-top: 10px

color: #ffffff

vertical-align: text-top

display: inline-block

}

</style>

</head>

<body>

<ul style="width: 100pxmargin: autoborder: #303030 1px solid">

<li class="myli" style="height: 20px background-color: #666"></li>

<li class="myli" style="height: 40px background-color: rgb(17, 233, 186)"></li>

<li class="myli" style="height: 28px background-color: rgb(11, 87, 226)"></li>

<li class="myli" style="height: 60px background-color: rgb(7, 194, 178)"></li>

<li class="myli" style="height: 10px background-color: #303030"></li>

<li class="myli" style="height: 20px background-color: #bcbe23"></li>

<li class="myli" style="height: 40px background-color: #370d85"></li>

<li class="myli" style="height: 20px background-color: #303030"></li>

</ul>

</body>

</html>