如何使用CSS在一行中设置大量链接？

Question

我正在尝试在页面顶部放置一个栏，但不确定如何使所有链接都位于同一行。

这就是我所拥有的：

 #tb { list-style-type: none; position:relative; margin: auto; padding: 0; overflow: hidden; text-align: center; display: block; width: 60px; } 

 <div class id="tb"> <a href="homelink">Home</a> <a href="newslink">News</a> <a href="contactlink">Contact</a> <a href="aboutlink">About</a> </div> 

我尝试过删除CSS中的许多组合，但到目前为止还没有。 如果答案非常明显，请原谅我的无知，因为我是CSS新手。

谢谢，

-蒂苏纳

Answer 1

您已在#tb上设置了width ，这导致其中的a换行。 a标签将自动分类为inline元素，放置在同一行。

内联级元素是源文档中不构成新内容块的那些元素； 内容按行分布（例如，段落中的强调文本，行内图像等）。

（ http://www.w3.org/TR/CSS21/visuren.html#inline-boxes ）

删除width将使div可以填充其容器的整个宽度（因为它是一个block元素）。

块级元素占据其父元素（容器）的整个空间，从而创建一个“块”。

（ https://developer.mozilla.org/en/docs/Web/HTML/Block-level_elements ）

由于#tb现在与主体一样宽，所以a标签将在同一行上，仅当窗口大小减小到足够时才换行。

 #tb { text-align: center; } 

 <div class id="tb"> <a href="homelink">Home</a> <a href="newslink">News</a> <a href="contactlink">Contact</a> <a href="aboutlink">About</a> </div> 

在此特定示例中，您的CSS也可以简化，因为指定的许多属性已经是默认属性，不适用或无效。

Answer 2

更新：分别指定a-tag，继承传统

 #tb { list-style-type: none; position:relative; margin: auto; padding: 0; overflow: hidden; text-align: center; display: block; /*property will be inherited by 'a'-tag elements too*/ width: 60px; } #tb a{ display: inline-block; /* specifiy for a-tag separatly*/ } 

 <div class id="tb"> <a href="homelink">Home</a> <a href="newslink">News</a> <a href="contactlink">Contact</a> <a href="aboutlink">About</a> </div> 

Answer 3

您可以使用一些flexbox魔术：

 #tb { display: flex; justify-content: center; } 

 <div class id="tb"> <a href="homelink">Home</a> <a href="newslink">News</a> <a href="contactlink">Contact</a> <a href="aboutlink">About</a> </div> 

Answer 4

检查以下代码。

您可以显式使用display:inline-block或display:inline来使任何元素停留在同一行中。

最好使用ul代替div结构，这将使您的工作更加轻松。默认情况下，它将对齐在一行中。

 #tb { list-style-type: none; position:relative; margin: auto; padding: 0; overflow: hidden; text-align: center; display: block; } 

 <div class id="tb"> <a href="homelink">Home</a> <a href="newslink">News</a> <a href="contactlink">Contact</a> <a href="aboutlink">About</a> </div> 

Answer 5

删除width: 60px #tb

使用ul li和display: inline-block用于li

 #tb { list-style-type: none; position:relative; margin: auto; padding: 0; text-align: center; display: block; } #tb > li{ display: inline-block; vertical-align: top; margin: 0 5px; } 

 <ul id="tb"> <li><a href="homelink">Home</a></li> <li><a href="newslink">News</a></li> <li><a href="contactlink">Contact</a></li> <li><a href="aboutlink">About</a></li> </ul>