html - 列表统一对齐

Question

如何在 html/css 中创建一个显示如下数据的列表：

who:   him
where: there
what:  that
why:   because

以便答案的水平对齐一致，即使它不是等宽字体？

Answer 1

如果您使用“li”，请在 css 中创建两个类，如下所示：

.question{
    clear:right;
    width: 50px;
}
.answer{
   float:left;
}

而且当然：

li{
    display:inline-block;
}

可能很清楚：左；不确定两者都试。

然后将 class="question" 应用于问题，将 class="answer" 应用于答案。

您可能还想添加：

margin:0;padding:0;list-decoration:none;

Answer 2

可以使用无序列表和inline-block <span>第一列

<ul>
    <li><span>who:</span>him</li>
    <li><span>where:</span>there</li>
    <li><span>what:</span>that</li>
    <li><span>why:</span>because</li>
</ul>

ul, li {list-style:none;margin:0;padding:0;}
li span {display:inline-block;width:60px;}

jsfiddle

Answer 3

尝试这个

HTML

<ul>
    <li><span>who:</span>him</li>
    <li><span>where:</span>there</li>
    <li><span>what:</span>that</li>
    <li><span>why:</span>because</li>
</ul>

css

ul, li {list-style:none;margin:0;padding:0;}
li span {display:inline-block;}

jQuery

$(document).ready(function() {
    max = 0;
    $('li span').each(function() {
        c_width = parseInt($(this).width());
        if (c_width > max) {
            max = c_width;
        }
    });
    $('li span').css('width',max);
});