<html> <head> <style> body,ul,li,span{padding:0px;margin:0px;} </style> </head> <body> <div> <ul> <li style='width:100%;list-style:none;text-align:center'> <span style="display:block;width:95%">块元素</span> </li> </ul> <ul> <li style='width:100%;list-style:none;text-align:center'> <span style="display:inline-block;width:95%">块元素</span> </li> </ul> </div> </body> </html>
父级元素的状态只能不是能管住所有的自己元素的
这里的text-align:center的属性,只能对行内块元素,inline-block进行限制,而限制不了block,所以会导致,第一个块元素的字体,相对于第二个字体,水平偏左
![](https://img2024.cnblogs.com/blog/35695/202408/35695-20240825082459112-376424429.jpg)