仅在文本字段上的背景色

Question

这是我的代码：

HTML：

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

CSS：

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

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

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

Answer 1

将您的文本包装在一个跨度内。像这样

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

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

Answer 2

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>

Answer 3

<div> 标签是显示block，所以它会填满背景。

在这种情况下，您只需为<div> 标签设置display : inline;

点赞https://jsfiddle.net/en27xg3b/4/

Answer 4

我会看看http://www.w3schools.com/cssref/tryit.asp?filename=trycss_text_background

但你可以做的是有一个风格

<style>
span.highlight {
  background-color:red;
}
</style>

现在你可以在你的html中做

<div id="hello">
  <span class="highlight">
    Hello
   </span>
   More Text
</div>