0

如何将列表放置在页面的中心。在 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 中我只想知道如何将列表放在站点中间。我很抱歉不够明确。

4

4 回答 4

1

您的 CSS 看起来不错，只需从中删除position: absolute;，它将完美居中：

CSS

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

您可以像这样在此处使用边距的简写符号：margin: 0 auto;. 这意味着，顶部和底部边距设置为0，左右设置为auto。

演示

先试后买

于 2013-11-08T11:20:19.693 回答
0

查看 css display:table 集。类似http://ajaxian.com/archives/display-table

于 2013-11-08T11:05:20.417 回答
0

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

例子

于 2013-11-08T11:05:25.870 回答
0

这样的事情应该解决你：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;
}

然后摆弄样式，让它看起来完全符合您的要求。. .

于 2013-11-08T11:07:32.413 回答