将 li 沿直线向下对齐

Question

问题：

我的网站出现对齐问题。我正在使用display:inline; 在我的网站上显示一些国家/地区的标志。问题在于margin，如果标志旁边的数字超过个位数（例如 10 或更多），它会进一步移动文本，因为相同的margin 被应用于它。这使得所有标志的对齐方式都不同，具体取决于它们旁边的数字。

问题：将它们排成一条直线的最佳方法是什么？ （数字的最大长度为 3 位数。）

P.S：我什至不介意在一行上有 3 个标志，但我宁愿让它们一直向下对齐。

下面是相关代码：（完整代码在fiddle）

CSS：

#visitor ul {
    font-size: 20px;
    list-style-type: none;
    margin-top: 20px;
}
#visitor ul li {
    display:inline;
}
#visitor ul li img {
    vertical-align: middle;
    margin: 25px;
}

HTML：

<section id="visitor">
    <ul>
        <li>
            <img src="http://i58.tinypic.com/28u467o.png" width="48" height="48" alt="US" />5</li>
        <li>
        <li>
            <img src="http://i58.tinypic.com/28u467o.png" width="48" height="48" alt="US" />55</li>
        <li>
    </ul>
</section>

JSFiddle Demo

任何帮助将不胜感激！

Answer 1

我认为这可以解决问题。

#visitor ul li {
    display:inline-block;
    width:150px;
}

这里的想法是给 li 一个固定的宽度。