标签将不会设置为显示内联

Question

我试图让3个标签显示内联，但由于某些原因，他们不和并保持在同一行。我究竟做错了什么？

<style> 

.topBar { 
display: inline;   
} 

</style> 

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

Answer 1

你想...

“我试图让3个标签显示嵌入式”

但然后说

“他们不[显示直列]并停留在同一行”

的显示属性inline装置至在同一行上显示它们。

如果你希望他们堆叠/每自成一行，尝试设置display: block;

如果这些东西一部分，一个导航块或一些相关的项目，可以通过将它们降低你的类做标记一起具有 “顶栏” 类

div.topBar label { 
 
    display: block; 
 
}

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

Answer 2

你的代码工作：

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