首先行高百分比的书写，百分比是针对字体大小进行设置的，也就是说如果你的文字大小为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>
