css float替代使li左对齐

Question

以下是代码：http://jsfiddle.net/o3omng/hrh1s7ss/

当我将float : left用于li标签时，
li标签超出了其类为na_cate的div。

请在na_cate的中心维护li标签，
并使这些li标签保持对齐。

Answer 1

将text-align: center;设为div.na_cate ul，将display: inline-block;设为div.na_cate ul li

尝试 - DEMO

你可以这样做：

.na_cate ul {
    list-style: none ;
    text-align: center;
}
.na_cate ul li {
    display: inline-block;
}

Answer 2

您需要清除容器的浮动。

.na_cate li {
   float:left;
   margin-left:20px;
}

.na_cate ul { 
   list-style:none;
   overflow:hidden;  /* clearfix */
}

或者，这里another clearfix不使用溢出而是使用伪元素。