html - 仅在文本字段上使用背景色

Question

这是我的代码:

HTML:

<div id="hello">
Hello
</div>

CSS:

#hello {
  font-size:30px;
  background-color:red;
}

正如您在 fiddle ( https://jsfiddle.net/en27xg3b/ ) 中看到的那样，背景颜色位于所有 div 上。我希望它只出现在“你好”所在的位置。

我很确定这是一个简单的代码，但我忘记了怎么做。

Answer 1

1. 使用inline-block 或inline:https://jsfiddle.net/en27xg3b/1/

#hello {
  font-size:30px;
  background-color:red;
display: inline-block;
}

<div id="hello">Hello</div>

---

1. 或者将文本包装在 span 中:https://jsfiddle.net/en27xg3b/2/

#hello span {
  font-size:30px;
  background-color:red;
}

<div id="hello"><span>Hello</span></div>