Question

我正在使用标头标签，并且我不希望在它们后面换行。

我尝试使用display: inline;属性，但是没有用。

HTML：

<h5>Token No.:</h5> <h4>147</h4>

CSS：

h5 {
    display: inline;
}

这应该不会导致换行，但是会在“令牌编号：”之后给出一个

Answer 1

您同时需要内嵌显示h4和h5，可能需要设置!important来覆盖其他选择器

h5, h4 {
    display: inline !important;
}

已更新：

如果您只想影响当前部分，则可以转到带有类的div

<div class='token'>
   <h5>Token No.:</h5> <h4>147</h4>
</div>

css

.token h5, .token h4 {
        display: inline !important;
 }

h5, h4 {
    display: inline !important;
}

<h5>Token No.:</h5> <h4>147</h4>

Answer 2

您看到的换行符实际上是由每个标题标签上方和下方的固有垂直边距引起的；您可以通过在margin: 0和h4上同时设置h5来消除这种情况：

h4, h5 {
  margin: 0;
}

<h5>Token No.:</h5>
<h4>147</h4>

Answer 3

您可能需要知道h1，h2，h3 ...具有自己的本机样式，这就是为什么这些标记中的单词可以更大的原因。

如果要内联显示文本，最好使用<span>。

<span>Token No.:</span> <span>147</span>

Answer 4

您还需要为display:inline输入h4。

js fiddle example

h5, h4 {
  display: inline;
}

Answer 5

执行此操作的最干净的方法是

<h5>Token No.: <span>147</span></h5>

注释标题标签是默认的块级元素，因此，每当一个接一个地堆叠垂直标题标签时，它将占用整个宽度并在每个标题标签处换行。因此，我在块级元素内使用了内联级元素，以免中断。内联水平元件一个接一个地水平堆叠。

<span>1</span><span>2</span><span>3</span><span>4</span><span>5</span>

但是块级元素垂直堆叠

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>

因此，如果您不想在HTML中换行，则应该为这两个标题标记定义display: inline。您仅将h5设置为dislay: inline;。您需要同时设置两者以内联显示或将float: left;设置为h5才能起作用。

h5, h4 { float: left}

<h5>Token No.: </h5> <h4> 147</h4>

Answer 6

您可以为代码使用包装器，并按如下所示使用display：flex属性

<section class="section-wrapper">
<h5>Token No.:</h5>
<h4>147</h4>
</section>


<style> // No need to use <style> tags if you have a seperate css file
    .section-wrapper {
      display: flex;
      flex-direction: row;
    }
</style>

如何避免标题标签中出现换行符？

6 个答案: