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

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

将李直线向下排列

1 个答案: