html - 将单独的文本与 div 标记放在同一行

Question

我使用 CSS 将部分文本字体设置为粗体。但我不希望整行都是粗体。只是部分正文。我怎样才能做到这一点？这是我的代码:

HTML

<div>
   <div id="titleLabels">Revision:</div> 1.0 draft A
</div>

CSS

#titleLabels 
{
   font-weight: bold;
}

它的输出是这样的:

这不是我想要的。我希望“1.0 草案有点与修订版的内容一致”。

我该怎么做呢？

Answer 1

只需添加 display:inline至 #titleLabels :

#titleLabels {
    font-weight: bold;
    display:inline;
}

<div>
    <div id="titleLabels">Revision:</div>1.0 draft A
</div>

默认情况下，div 是 block 级元素，除非您更改它，否则将占据其父元素的整个宽度。

一个更合乎逻辑的解决方案是不在修订文本上使用 div，而是使用 <strong> , <b>或 <span>使用字体粗细样式。

#titleLabels {
  font-weight: bold;
}

<div>
  <b>Revision:</b>1.0 draft A
</div>
<div>
  <strong>Revision:</strong>1.0 draft A
</div>
<div>
  <span id="titleLabels">Revision:</span>1.0 draft A
</div>