html - リストの統合アライメント

Question

次のようなデータを表示する html/css のリストを作成するにはどうすればよいですか。

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

等幅フォントでなくても、回答の水平方向の配置が一貫しているようにするにはどうすればよいですか?

Answer 1

これを試して

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