Question

我已经在我的代码中使用<span>通过.js在我的CMS中使用粗体文字，让我们说标题输入。现在我只想在标题文本后面添加一个蓝色背景，如下所示，但不使用背景得到拉伸。

我喜欢我的背景来响应文本输入长度，这是最简单的方法，而不会扰乱整个代码。有可能吗？

＆＃13;

body {} img {
  width: 100%;
}
.h {
  font-family: "Arial";
  font-size: 30px;
  text-align: center;
  color: #FFF;
}
.h span {
  position: relative;
  background-color: #00A0E8;
  padding-left: 18px;
  padding-right: 18px;
  padding-top: 3px;
  padding-bottom: 3px;
}
.square {
  position: relative;
  background-color: #00A0E8;
  padding-left: 18px;
  padding-right: 18px;
  padding-top: 3px;
  padding-bottom: 3px;
}

＆＃13;

<div class="h"><span><b>I WANT</b> THIS</span>
</div>

<br>
<br>
<div class="h">
  <div class="square"><b>I GET</b> THIS</div>
</div>

＆＃13;

Answer 1

只需在display:inline-block;课程中添加.square。

body {} img {
  width: 100%;
}
.h {
  font-family: "Arial";
  font-size: 30px;
  text-align: center;
  color: #FFF;
}
.h span {
  position: relative;
  background-color: #00A0E8;
  padding-left: 18px;
  padding-right: 18px;
  padding-top: 3px;
  padding-bottom: 3px;
}
.square {
  display:inline-block;
  position: relative;
  background-color: #00A0E8;
  padding-left: 18px;
  padding-right: 18px;
  padding-top: 3px;
  padding-bottom: 3px;
}

<div class="h"><span><b>I WANT</b> THIS</span>
</div>

<br>
<br>
<div class="h">
  <div class="square"><b>I GET</b> THIS</div>
</div>

Answer 2

您可以使用CSS属性display。您可以将其设置为：inline或inline-block。实际上，这是<span>默认执行的操作

Answer 3

Shader对于快速指定内联内容很有用。

我发现在结合CSS过渡时效果不佳。

这是默认情况下内联的html元素的替代列表。

大多数是为文本制作的！

<a>
<abbr>
<acronym>
<audio> (if has visible controls)
<b>
<bdi>
<bdo>
<big>
<br>
<button>
<canvas>
<cite>
<code>
<data>
<datalist>
<del>
<dfn>
<em>
<embed>
<i>
<iframe>
<img>
<input>
<ins>
<kbd>
<label>
<map>
<mark>
<meter>
<noscript>
<object>
<output>
<picture>
<progress>
<q>
<ruby>
<s>
<samp>
<script>
<select>
<slot>
<small>
<span>
<strong>
<sub>
<sup>
<svg>
<template>
<textarea>
<time>
<u>
<tt>
<var>
<video>
<wbr>

Span

<span>有什么替代方案吗？

3 个答案: