0

如何以这样的方式居中对齐以下 html，即“：”应该在中心并且应该在彼此下方列出

<ul>

<li>
<label>Suomething 1 :</label> 
<span>Another 111111111111111111</span>
</li>

<li>
<label>Suomething 2222222222 :</label> 
<span>Another 2</span>
</li>

</ul>

CSS：

label{
width:25%;
display: inline-block;
width: 250px;
}

编辑：-添加的 CSS

4

4 回答 4

8

尝试这个：

label{width:170px;display:inline-block;}

在这里拉小提琴。

于 2013-10-30T10:41:48.270 回答
1

您可能想要使用表格显示：

http://jsfiddle.net/5NarV/1

CSS

ul {
    display: table;
    padding: 0;
}

li {
    display: table-row;
}

label, span {
    display: table-cell;
    width: 50%;
}

label {
    text-align: right;
}

span {
    padding-left: 0.35em;
}

HTML

<ul>
    <li>
        <label>Suomething 1 :</label> 
        <span>Another 111111111111111111</span>
    </li>
    <li>
        <label>Suomething 2222222222 :</label> 
        <span>Another 2</span>
    </li>
</ul>
于 2013-10-30T10:42:28.070 回答
1

它适用于这个 CSS：

li {
    display: block;
}
label {
    width:35%;
    display: inline-block;
    text-align:right;
    float:left;
}

span {
    width:65%;
    float:right;
    display: inline-block;
}

演示：http: //jsfiddle.net/tVSte/

于 2013-10-30T10:49:29.320 回答
0

像这样

演示

css

ul{
    text-align:center;
}
于 2013-10-30T10:37:14.273 回答