Question

如何让菜单css 菜单nav居中 内部li左对齐

整个外框都不限定宽度
<nav>这个总块居中，但不限定宽度
<li></li>这部分左对齐
<li></li>
<li></li>
<li></li>
</nav>

Answer 1

• nav居中，给对应的层加上margin:0 auto;

• 1行n列居中对齐可以通过把li设置成行内块模式：display: inline-block;

<style>

.nav {

　　margin:0 auto;

　　width:100%;

　　border:1px solid #ccc;

　　text-align:center;

}

ul li{ 

　　list-style:none;

　　margin-left:20px;

　　display: inline-block;

}

</style>

 

<div class="nav">

　　<ul>

　　<li>这部分左对齐1</li>

　　<li>这部分左对齐2</li>

　　<li>这部分左对齐3</li>

　　<li>这部分左对齐4</li>

　　</ul>

</div>

Answer 2

居中:text-align:center;( 而默认就是左对齐的)，
再设置：text-align:left;
代码如下：
.box｛text-align:center；text-align:left｝

<ul class=“box”>
<li>内容1</li>
<li>内容2</li>
<li>内容3</li>
</ul>

Answer 3

写2个div
<style>
.nav{width:100%; height:40px; background:blue;}
.dh{clear:both;width:1000px;height:40px;line-height:40px;margin:auto;}
.dh li{float:left;color:#ffffff; text-align:left;padding:0px 10px 0px 10px}
</style>
<div class="nav">
<div class="dh"><ul>
<li>1111111</li>
<li>2222222</li>
<li>3333333</li>
<li>4444444</li>
</ul></div>
</div>

追问

dh限定了宽度，导致li列表在dh中全部靠左了

Answer 4

<div style="width:100%; height:50px; background:#000;" class="nav">
<ul>
<li style="float:left; color:#fff; text-align:left;">1</li>
<li style="float:left;color:#fff; text-align:left;">2</li>
<li style="float:left;color:#fff; text-align:left;">3</li>
<li style="float:left;color:#fff; text-align:left;">4</li>
<li style="float:left;color:#fff; text-align:left;">5</li>
<li style="float:left;color:#fff; text-align:left;">6</li>
</ul>
</div>

Answer 5

代码如下，已经测试通过：

<nav style="margin:0 auto;width:auto;border:1px solid #ccc;">这个总块居中，但不限定宽度
<ul style="list-style:none;">
<li>这部分左对齐1</li>
<li>这部分左对齐2</li>
<li>这部分左对齐3</li>
<li>这部分左对齐4</li>
</ul>
</nav>

如果限定宽度，则为：

<nav style="margin:0 auto;width:300px;border:1px solid #ccc;">这个总块居中，但不限定宽度
<ul style="list-style:none;">
<li>这部分左对齐1</li>
<li>这部分左对齐2</li>
<li>这部分左对齐3</li>
<li>这部分左对齐4</li>
</ul>
</nav>

追问

nav不限定宽度的话，宽度时100%，里面的列依旧靠屏幕左边。我想要的是类似1行n列的居中对齐的表格div版本

追答

<style>
.nav {margin:0 auto;width:100%;border:1px solid #ccc;text-align:center;float:left;}
ul li{list-style:none;float:left;margin-left:20px;}
</style>

<div class="nav">这个总块居中，但不限定宽度
<ul>
<li>这部分左对齐1</li>
<li>这部分左对齐2</li>
<li>这部分左对齐3</li>
<li>这部分左对齐4</li>
</ul>
</div>