如何将文本放在div html5的两侧

Question

我一直试图在div的两边放置一些文字，但我似乎无法弄清楚我做错了什么，因为无论我尝试什么都行不通。

我想要达到的目标是：

以下是我的尝试

I am <div>I will be adding a scale here</div> old
<div>I am</div> <div>I will be adding a scale here</div> <div>old</div>]

但它返回

我已经设法通过以下代码达到了所需，但我想使用div而不是输入，标签和跨度。

<span>Good</span>
<input type="range" id="weight" min="0" value="0" max="3" step="1" list="volsettings">
<span>Bad</span>
<datalist id="volsettings">
  <option>0</option>
  <option>1</option>
  <option>2</option>
  <option>3</option>
  </datalist>

https://jsfiddle.net/Lw155sx9/

如果可能的话，我宁愿不使用任何CSS。任何帮助表示赞赏。

Answer 1

您可以使用最少的更改和CSS样式的flexbox。

这是你能做的。

.container {
  display: flex;
}

<div class="container">
  <div>I am</div>
  <div>I will be adding a scale here</div>
  <div>old</div>
</div>

Answer 2

您可以使用<span>，这是<div>的内联类型。但是如果你真的需要一个内联div，请为它创建一个类并将其分配给div：

CSS：

.display-inline {display: inline;}

HTML：

I am <div class="display-inline">I will be adding a scale here</div> old

如果您希望内联div显示文本以外的内容，例如较大的图片，那么您可能需要使用inline-block代替：

.display-inline-block {display: inline-block;}

Answer 3

执行此操作的最佳方法是更改​​所有跨度或使用css并使用css将div更改为display: inline。然后在每个div上设置一个。

还在父div上设置text-align: center。

希望这有帮助

Answer 4

围绕另一个div包裹div，给内部div display:inline-block;和外部div :before和:after伪选择器显示内部div两侧的文本，然后叫它一天。 ; - ）

段

＆＃13;

＆＃13;

.line {
  background: linear-gradient(to right, rgba(0, 0, 255, .5), rgba(0, 0, 255, 1), rgba(0, 0, 255, .5));
  height: 100%;
  width: 60vw;
  display: inline-block;
  text-align: center;
}
.box {
  height: 12px;
  padding-top: 10px;
}
.box:before {
  content: 'BEFORE';
  padding-bottom: 10px;
}
.box:after {
  content: 'AFTER';
  padding-bottom: 10px;
}

＆＃13;

<div class='box'>
  <div class='line'></div>
</div>

＆＃13;

＆＃13;

＆＃13;