Question

如何将列表放在页面的中心。在html中你可以创建一个表，并使用例如100％的表宽度然后你可以分配每个部分。但我想摆脱这一点，并希望更多地关注我的CSS。我创建了一个div，我的css目前看起来像这样：

.list {
        margin-left: auto;
        margin-right: auto;
        width: 6em;
        background: white;
        position: absolute;
        height: auto;
        border: 1px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        -border-radius: 10px;
        border-radius: 10px;
}

编辑：我已经创建了一个无序列表，并在类名为“list”的div中对其进行了标记我只想知道如何将列表放在网站中间。 我很抱歉因为不够明确。

Answer 1

您的CSS看起来很好，只需从中移除position: absolute;即可完美居中：

<强> CSS

.list {
    margin: 0 auto;
    width: 6em;
    border: 1px solid red;
    border-radius: 10px;
}

您可以在此处使用边距的简写表示法：margin: 0 auto;。这意味着，上边距和下边距设置为0，左右边距设置为auto。

<强>演示

Try before buy

Answer 2

查看css显示：表集。像http://ajaxian.com/archives/display-table

这样的东西

Answer 3

您可以创建<ul>列表并应用css。这就是我最近一直在努力的事情

Example

Answer 4

这样的事情会让你感到厌烦：http://jsfiddle.net/hYFgp/

HTML

<ul>
<li>#1</li>
<li>#2</li>
<li>#3</li>
<li>#4</li>
<li>#5</li>
</ul>

CSS

ul{
width: 200px;
border: 1px solid red;
margin: 0 auto;
padding: 0;
}
ul li{
text-align: center;
list-style-type: none;
}

然后摆弄风格，让它看起来完全符合您的要求。。

在html中使用css而不是表函数

4 个答案: