标题不允许<span>在同一行中对齐

Question

我有一个 css 标头，它不允许我使用 .我想标题有一个奇怪的默认值，不允许我这样做，我该如何防止默认值或我可以使用其他什么来代替？

.HTML

h3>Size:</h3>
<?php echo "<span class='sP'>".$pSize ."</span><br>"?>

.CSS

h3{
margin-top: 0;
margin-bottom: 0;
color: #7C7C7C;
font-size: 20px;
font-weight: bold;
text-align: left;
font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace;
}
.sP{
color: #7C7C7C;
font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace;
}

Answer 1

我认为这将是您正在寻找的答案 - 只需display:inline-block.我已经放了一个带有答案的工作样本，请尝试这个，如果有任何问题请询问。

h3{
margin-top: 0;
margin-bottom: 0;
color: #7C7C7C;
font-size: 20px;
font-weight: bold;
text-align: left;
font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace;
display:inline-block;
}
.sP{
color: #7C7C7C;
font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace;
display:inline-block;
}

<h3>Size:</h3>
<span class='sP'>hi</span><br>

Answer 2

尝试将<span>放在<h3>标签中，因为标题需要整个宽度。

<h3>Size:
<?php echo "<span class='sP'>".$pSize ."</span><br>"?>
</h3>

Answer 3

标题元素(h1-h6(是块级元素，因此这就是为什么您特别需要将它们设置为display：inline-block，以便在它们旁边显示某些内容。

h1 { display: inline-block }
span { display: inline-block }

<h1>Hello, i'm a big fat heading</h1>
<span>Look at me, i'm a little 'ol span</span>