html - 使用 CSS3 和最佳实践将图像排成一行

Question

抱歉，我真的是 HTML5 和 CSS3 的新手，我的搜索没有找到任何我确信是非常基本的东西。我想要做的是为我的网站创建一行可点击的图像/链接。就像堆栈溢出如何有问题一样，在上面标记用户链接。

到目前为止，我的 CSS 如下所示:

a#header { 
    display:block;
    margin: 0px auto;
    padding: 0px 15px 0px 15px;
    border: none;
    background: url('img url') no-repeat bottom;
    width: 50px;
    height: 100px;    
}

但这不是我想要的。它只是将图像放在屏幕中央。有人可以帮我吗？另外，做这样的事情是否有最佳实践？

Answer 1

margin:0 auto 是将它放在屏幕中央的原因。您可能希望删除它，或将其放在容器元素上而不是单独的盒子上。

将多个框排成一行可能需要的是 float:left 或 display:inline-block。这些中的任何一个都可以工作；它们的工作方式不同，为了让布局按您想要的方式工作，您需要了解它们的一些事情，但我会将这些额外的细节留给您做进一步的研究。

值得注意的是，您引用的代码都不是特定于 HTML5 或 CSS3 的——它们都是已经存在很长时间的基本 HTML/CSS 语法。