极客观点
项目管理
HarmonyOS
我尝试用ul，li来实现table，后来想着如何让table水平置中；结果出了点问题；没思路，求指导，是不是css加了不该加的？提前感谢下回答的童鞋。
不过我主要是弄懂，为什么会出现排版不齐的问题？
<html><head>
<meta charset="UTF-8">
<title>Execl</title>
<style type="text/css">
ul{
}
.ul_row{
display:inline-block;
min-width:800px;
margin:0 auto;
}
#table_div{
width:100%;
text-align:center;
}
.title{
display:inline-block;
min-width:800px;
margin:0 auto;
}
li{
list-style-type: none;
float:left;
height:30px;
text-align:center;
margin-left:1px;
margin-bottom:1px;
padding:0;
}
</style>
</head>
<body>
<div id="table_div">
<ul class="title">
<li id="12301" style="width: 200px; background-color: rgb(240, 128, 128);"><span>name</span></li>
<li id="12302" style="width: 200px; background-color: rgb(240, 128, 128);"><span>age</span></li>
<li id="12303" style="width: 300px; background-color: rgb(240, 128, 128);"><span>sex</span></li>
</ul>
<ul class="ul_row">
<li id="12311" style="width: 200px; background-color: rgb(238, 230, 133);"><span>wow</span></li>
<li id="12312" style="width: 200px; background-color: rgb(240, 248, 255);"><span>24</span></li>
<li id="12313" style="width: 300px; background-color: rgb(238, 233, 191);"><span>male</span></li>
</ul>
<ul class="ul_row">
<li id="12311" style="width: 200px; background-color: rgb(238, 230, 133);"><span>wow</span></li>
<li id="12312" style="width: 200px; background-color: rgb(240, 248, 255);"><span>24</span></li>
<li id="12313" style="width: 300px; background-color: rgb(238, 233, 191);"><span>male</span></li>
</ul>
</div>
</body>
</html>
这段代码在firefox上能够达到要求，但是在chrome就出现问题了；截图如下：
这是chrome上的，通过拉伸网页宽度，当网页width超过863px时，布局开始乱了，最后一行不对齐，很奇怪。
这是firefox上的，拉伸没出现问题
你这个
css写得太乱了，好好整整，给你推荐个前端代码规范吧： 编码规范 by @mdo帮你找了下错误的原因，我分析是因为当你在外层
div中加入text-align : center 或者 right样式后，若此时div内的子元素未进行缩进，chrome解析css时将会产生错误，而firefox则不受影响，所以这应该是一个浏览器兼容性的问题。你试着把ul与div缩进写好，如下：此时，在
chrome下不会再出现排版不齐了。虽然看上去是个浏览器兼容性问题，但是根本原因在于你的代码写的不够规范。问题根源可参考：http://segmentfault.com/q/1010000000466492