Question

我有20个图标，我想从它们制作一个居中的水平图像线。但是我不能使用HTML表格，因为我希望它能够响应。它应该包含给移动用户。通过使用HTML表格，我想我应该使用1行和20列，但它不会包装小屏幕。

我创建了一组像这样的div。这个观点是可以的。 http://jsfiddle.net/mayJ6/

<div style="display: inline-block; border: solid 1px black;">
    <a href="http://www.example.com" target="_blank" >
        <img src="http://profile.ak.fbcdn.net/hprofile-ak-prn1/157940_262105851352_1630693163_q.jpg"
           width="50" height="50" alt="photo"/>
    </a>
</div>

但this answer告诉不要在这种情况下使用显示内联块。有没有更好的解决方案看起来类似，使用Twitter Bootstrap等？

Answer 1

我认为对于这种情况display: inline-block完全正常。

在你引用的答案中，他们谈论的是主要布局，比如当你有2或3列时想要并排显示它们，在这种情况下浮动它们会更好。

您可以使用浮点数获得相同的结果，但是您必须使用容器包装照片/图标并设置固定宽度或填充以便像这样居中。如果您将宽度设置为百分比，它仍会包含较小的分辨率，如我的示例所示：http://jsfiddle.net/E9pS9/

使用Bootstrap创建居中的表

1 个答案: