Question

我希望将H3和P标签成对放在同一条线上。我不想使用标记<table>。

HTML：

<h2>SERVERS:</h2>
<!--I want each set of H3 and P to be on the same line-->
<h3>Server 1 Status:</h3><p id="running">Running</p>
<h3>Server 2 Status:</h3><p id="notRunning">Not Running</p>
<h3>Server 3 Status:</h3><p id="running">Running</p>

CSS：

#running {
    color:green;
    font-weight:bold;
}
#notRunning {
    color:red;
    font-weight:bold;
}

我一直在各处搜索，大部分帖子都是<table>标签，或者很旧，不起作用。

Answer 1

使用display：inline

h3,p{
display:inline;
}

Answer 2

使用display: inline：

h3, p {
    display: inline;
}

有关display选项的良好比较，请参阅https://stackoverflow.com/a/14033814/5011843。

Answer 3

像这样使用css，DEMO

h3,p {

display:inline;
}

Answer 4

请尝试以下操作： Demo

p,h3{
display:inline-block;
}

修改 Demo

在您的代码中，此类中存在拼写错误

#notRunning {        
    font-weight:bold;
}

对于下一行，您可以根据您的要求使用clear或<br/>

.clear {
    clear:both;
    height:0;
}

Answer 5

您需要添加css：

h3,p{
  display:inline;
}

并为每行添加<br />标记

Demo

Answer 6

编辑代码：

<h2>SERVERS:</h2>
    <!--I want each set of H3 and P to be on the same line-->
    <h3>Server 1 Status:</h3><p class="running">Running</p>
    <h3>Server 2 Status:</h3><p class="notRunning">Not Running</p>
    <h3>Server 3 Status:</h3><p class="running">Running</p>

改变＆＃34; id＆＃34;进入课堂，所以它可以更具体，它不会适用于你的所有网页，只是运行和非运行。 CSS：

h3,p.running,p.notRunning {
display:inline;
}

Answer 7

这是我的解决方案，它们成对排列：

#running {
    color: green;
    font-weight: bold;
}

#notRunning {
    color: red;
    font-weight: bold;
}

h3, p {
    display: inline;
}

h3::after {
    content: " ";
}

p::after {
    content: "";
    display: block;
    margin: 1em;
}

假设我无法访问HTML并且必须在CSS中执行所有操作。第display: inline行只是将所有标题和段落放在一行上。使用伪选择器::after，我们在每对中以及垂直对之间获得一些空间，并且行display: block在每个段落之后处理换行符，从而将每对放在单行上。

这是小提琴： http://jsfiddle.net/ucLmhx7t/1/

如何使HTML元素出现在一行？

7 个答案: