将单独的文本与 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-block

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

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

Answer 2

只需将 display:inline 添加到 #titleLabels:

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

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

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

一个更合乎逻辑的解决方案是不在修订文本上使用 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>

Answer 3

您可以使用 <b> 标签简单地将特定文本段设置为粗体

<div>
   <b>Revision:</b> 1.0 draft A
</div>

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

keep separate text on the same line as div tag

html

css

text