<style>
  div {
    width:100%;
    text-align:center;
  }
  ul {
    display:inline-block;
    min-width:800px;
    margin:0 auto;
  }
  li {
    float:left;
    height:30px;
    width: 200px;
    margin-left:1px;
    margin-bottom:1px;
    list-style-type: none;
    background-color: lightblue;
  }
</style>
<div>
<ul>
  <li>1</li>
</ul>
<ul>
  <li>2</li>
</ul>
</div>

此时如果用 chrome 打开上述代码，会发现样式出现问题。但是如果我把 ul 标签的缩进改好，如下：

 <div>
  <ul>
    <li>1</li>
  </ul>
  <ul>
    <li>2</li>
  </ul>
</div>

样式恢复正常，或者不加缩进，只是去除两个 ul 标签之间的空格：

 <ul>
  <li>1</li>
</ul><ul>
  <li>2</li>
</ul>

样式同样恢复正常。我找了下原因，我认为是因为外层 div 的 text-align 属性起了作用，当 text-align 为 center 或者 right 时，就会出现这个现象，为 left 时正常。大家分析下出现 bug 的原因在哪儿呢？

这个问题的出现是因为我在回答 @Dont 提出的 问题 时发现的，虽然问题得到了解决，但是总感觉不知道根源出在哪儿。