如何在一个框中制作div并排用于货币输入

Question

如何制作上面那样的盒子？在没有 boostrap 的纯 css 中

为什么我问这个是因为我不使用 bootstrap 4 并且找不到任何方法将它与 boostrap 3 一起使用，我试图制作一个，但它的盒子变得像一列向下

这是我的CSS：

.currency {

  white-space: nowrap;

  max-width: 150px;

  overflow: hidden;

  text-overflow: ellipsis;

  float:left;

  border: 2px solid;

}

和我的html

<div>

  <label class="currency"></label>

  <input type="text"> 1000

</div>

Answer 1

包装器可以是一个label元素，货币符号可以是::before伪元素，它可以读取data-*标签本身的属性。label {&nbsp; &nbsp;border: 2px #ccc solid;&nbsp; &nbsp;border-radius: .5em;&nbsp; &nbsp;display: inline-flex;&nbsp; &nbsp;color: #666;&nbsp; &nbsp;overflow: hidden;&nbsp; &nbsp;font: 2rem Verdana;}label:before {&nbsp; &nbsp;content: attr(data-currency);&nbsp; &nbsp;width: 2.5em;&nbsp; &nbsp;padding: .5em 0;&nbsp; &nbsp;background: #e6e6e8;&nbsp; &nbsp;text-align: center;&nbsp; &nbsp;font: inherit;&nbsp; &nbsp;border-right: inherit;}input {&nbsp; &nbsp;border: 0;&nbsp; &nbsp;padding: .25em .75em;&nbsp; &nbsp;font: inherit;&nbsp; &nbsp;color: inherit;}<label aria-label="Enter the amount in €" data-currency="€">&nbsp; &nbsp;<input type="text" /></label>

Answer 2

<div class="input-group">&nbsp; <span class="input-group-addon" id="basic-addon1">@</span>&nbsp; <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1"></div>这段代码使用 bootstrap 3 所以如果你愿意的话可以尝试一下