Question

我很难将li元素集中在我的文档中。

我在<div align="center">元素周围添加了一个包装器li，但运气不佳。

似乎只是每个li元素的标题居中，而不是整个li元素块。我希望整个Priority, Round 1 and Round 2区块居中（即在div的中间）。

到目前为止，这是我的代码：http://jsfiddle.net/nTcBk/

HTML

<div>
<div align="center">
<ul class="round">
        <li class="current-round" style="cursor: default; ">
          <div>Priority</div>
          <span>Ending 01/11/2012</span></li>
        <li style="cursor: default; ">
          <div>Round 1</div>
          <span>Starting 01/12/2012</span></li>
        <li style="cursor: default; ">
          <div>Round 2</div>
          <span>Starting 01/01/2013</span></li>
</ul>
</div>
</div>

CSS

.round {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}
.round li {
    color: #DDD;
    cursor: pointer;
    float: left;
    font-size: 18px;
    padding-right: 20px;
}
.round li span {
    font-size: 12px;
    display: block;
}
.round .current-round {
    color: #2a145d;
    cursor: auto;
}

提前致谢

Answer 1

享受 - http://jsfiddle.net/nTcBk/1/ 而不是：

.round {
    width:100%;
}

使用：

.round {
    display:inline-block;
}

Answer 2

align属性适用于表格（并且已弃用）。您可以在div中添加CSS类，而不是align =“center” <div class="align-center">

然后在CSS样式表中执行：

.align-center {text-align:center}

难以集中的li元素

2 个答案: