Question

我正在尝试将3个标签显示为内联，但由于某种原因，它们不会并且保持在同一行。我究竟做错了什么？

<style>

.topBar {
display: inline;        
}   

</style>

<label class = "topBar">One</label>
<label class = "topBar">Two</label>
<label class = "topBar">Three</label>

Answer 1

您的代码正在运行：

.topBar {
display: inline;        
}

<label class="topBar">One</label>
<label class="topBar">Two</label>
<label class="topBar">Three</label>

这甚至是大多数浏览器中的默认行为，请参见没有css的示例：

<label class="topBar">One</label>
<label class="topBar">Two</label>
<label class="topBar">Three</label>

如果它不起作用，可能是由于相互冲突的规则。尝试添加specificity：

label.topBar {
display: inline;        
}

或

#mypage label.topBar {
display: inline;        
}

Answer 2

你想......

“我正在尝试让3个标签显示内联”

然后说

“他们没有[显示内联]并且保持在同一行”

显示属性inline 表示以在同一行显示它们。

如果您希望将它们堆叠/放在各自的行上，请尝试设置display: block;

如果这些是某些内容，导航块或某些相关项目的一部分，您可以通过将它们放在具有“topBar”类的容器中来减少对类的标记

div.topBar label {
    display: block;
}

<div class="topBar">
    <label>One</label>
    <label>Two</label>
    <label>Three</label>
</div>

标签不会设置为内嵌显示

2 个答案: