用ul元素来做导航早已成为绝大多数网站的共识。设置li为float：left，然后在定义li的width，margin等属性即可完成。要让标题居中怎么办呢？只要讲ul的margin设为margin:0 auto；然后在定义ul的宽度就可以了。

css代码：

ul{width:400px;margin:0 auto;}
li{float:left;width:86px;margin-right:14px;background:#ffcccc;}

ul{width:400px;margin:0 auto;}<br/>li{float:left;width:86px;margin-right:14px;background:#ffcccc;}<br/>
html代码：

<ul>
  <li>标题1</li>
  <li>标题2</li>
  <li>标题3</li>
  <li>标题4</li>
</ul>

<ul><br/> <li>标题1</li><br/> <li>标题2</li><br/> <li>标题3</li><br/> <li>标题4</li><br/></ul><br/>

然而很多时候导航条的宽度并不是已知的，这个时候，因为元素已经设为左浮动，所有外层的text-align属性或是本身的margin属性都已失去了作用。这时该怎么办呢？在相册中遇到了这个问题，当时用了个比较“笨”的办法，用js去控制。我自然也知道这种样式的控制最好还是不要用js的道理，毕竟，行为和表现是不同层面的东西。

后来无意中看到了centering Float Left Menus这篇文章，算是获得了一种新的方法。

简单地讲一下，在IE中通过ul外面所增加的<del>元素，并将其的display设为inline-block。然后在ul外面的元素的text-align设为center就可以了。而在非IE浏览器下，通过设置ul的display为table，li的display为table-ceil即可实现。（就是讲ul和li模拟成表格的属性）。

CSS代码如下：

#menu {
  display:table;
  padding:0; 
  margin:0 auto; 
  list-style-type:none;
  white-space:nowrap;
  }
#menu li {
  display:table-cell;
  }
* html #menu li {
  float:left;
  }
#menu a {
  width:auto;
  display:block;
  padding:4px 16px;
  color:#fff; 
  background:#08c; 
  border:1px solid #fff; 
  text-decoration:none;
  }
* html #menu a {
  float:left;
  }
#menu a:hover {
  color:#000; 
  background:#d4d4d4;
  }

.container {text-decoration:none;}
* html .container {display:inline-block;}

#menu {<br/> display:table;<br/> padding:0; <br/> margin:0 auto; <br/> list-style-type:none;<br/> white-space:nowrap;<br/> }<br/>#menu li {<br/> display:table-cell;<br/> }<br/>* html #menu li {<br/> float:left;<br/> }<br/>#menu a {<br/> width:auto;<br/> display:block;<br/> padding:4px 16px;<br/> color:#fff; <br/> background:#08c; <br/> border:1px solid #fff; <br/> text-decoration:none;<br/> }<br/>* html #menu a {<br/> float:left;<br/> }<br/>#menu a:hover {<br/> color:#000; <br/> background:#d4d4d4;<br/> }<br/><br/>.container {text-decoration:none;}<br/>* html .container {display:inline-block;}<br/>

html代码：

<del class="container">
  <ul id="menu">
   <li><a href="#nogo">标题1</a></li>
   <li><a href="#nogo">标题2</a></li>
   <li><a href="#nogo">标题3</a></li>
   <li><a href="#nogo">标题4</a></li>
 </ul>
</del>

<del class="container"><br/> <ul id="menu"><br/> <li><a href="#nogo">标题1</a></li><br/> <li><a href="#nogo">标题2</a></li><br/> <li><a href="#nogo">标题3</a></li><br/> <li><a href="#nogo">标题4</a></li><br/> </ul><br/></del><br/>
只要设置del外面的div的text-align为center就可以保证ul在目标区域内的居中了。

只是不太明白，del标签是应用在表示要删除的元素上的。<del>我是要删除的文本</del>就会给“我是要删除的文本”中间加上一条线。（对应还有个ins，是表示要添加的文本，给文本加上了下划线）。为什么要用del呢？尝试了一下，将del改成div，对应的属性全部不变，ie下的居中就没有效果了！

期待有高人答复……