网络营销电子商务研究中心 - 让li横向排列且对于容器居中的方法

1、ul的CSS设置display:block;text-align:center，然后固定宽度，即成为一个文字居中的容器；
2、li的CSS设置display:inline，即可实现li的居中横排。

如果li有宽度要求，则需要设置display:inline-block。

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style type="text/css">

<!--

body,ul,li{

    padding:0;

    margin:0;}

     

 

ul{

    text-align:center;

    width:800px;

    background:#eee;margin:0 auto;

}

 

li{

    list-style:none;

    width:1px;

    display:inline;

    margin:0 5px;

    white-space:nowrap;

    word-break:keep;

    height:20px;

    line-height:20px;

    font-size:12px;

    font-family:"宋体";}      

-->

</style>

</head>

 

<body>

<ul>

    <li>连接</li>

    <li>连接</li>

    <li>连接</li>

    <li>连接连接连接</li>

    <li>连接连接连接连接</li>

    <li>连接连接</li>

</ul>

</body>

</html>