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);
});

列表的统一对齐

3 个答案: