为什么li标签会掉下来，我把li中的数字12删掉就恢复正常了，



```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    li{
        list-style:none;
        width: 40px;
        height: 40px;
        border: 1px solid #000;
        border-radius: 50%;
        display: inline-block;
        line-height: 40px;
        text-align: center;
    }
    ul{
        display: inline-block;
    }
</style>
<body>
<div>
    <ul>
        <li>12</li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <ul>
        <li></li>
        <li></li>
    </ul>
</div>
</body>
</html>

img

<body>
<div>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <ul>
        <li></li>
        <li></li>
    </ul>
</div>
</body>

img

li设置 vertical-align: top;
vertical-align用来指定行内元素或表格元素的垂直对齐方式
因为你里面有文字之后，文字的默认垂直对齐方式是baseline,也就是圆的底部，也就把圆拖了下来，如果你设置成顶部之后，他就会上去，又因为文字有line-height，虽然文字基线在圆顶部，但文字还是垂直居中效果。

如有帮助，望采纳 ^.^ 谢谢啦

li加vertical-align: middle;
block-inline是默认：vertical-align：baseline，baseline为基线对齐，加了字之后基线变成字的底部，变成图所示的对齐方式，所以就会掉下来

img

float: left

你这种布局方式 属于Flex布局 方法简单，比css或css3编写布局方便 可参考学习网址 https://www.runoob.com/w3cnote/flex-grammar.html

img