html - 如何在输入框前面添加文字

Question

我在尝试将文本添加到输入字段左侧和标签下方时遇到问题。

我正在使用 Bootstrap 4.3.1。我的 html 看起来像这样:

<div class="col-lg-6 col-md-6 col-sm-6">
<!-- some markup in here -->
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
    <div class="row">
        <label>Sensor URI:</label>
            http://<input value="" type="text" id="sensor_uri" min="15" max="1440" class="form-control" required/>
    </div>
</div>

它看起来像这样:

我尝试了各种方法，例如将“http://”括在不同的元素( <p> 、 div> 等)中，但没有成功。理想情况下，我希望在输入字段前面加上“http://”，这样用户就无法编辑它:

我该怎么做？

Answer 1

你需要做两件事 -

1. 使用 form-control-inline输入上的类，因此它将与“http://”文本对齐
2. 将输入和文本包装在 block 元素中，例如 <div>使其在标签下方独占一行。

• 注意 - 您有一个额外的 row div 没有任何 col s - 这是无效的，所以我在下面删除了它。

在此处查看工作片段:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="col-lg-6 col-md-6 col-sm-6">
  <!-- some markup in here -->
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
  <label>Sensor URI:</label>
  <div class="inputwrapper">http:// <input value=" " type="text " id="sensor_uri " min="15 " max="1440 " class="form-control-inline" required/>
    </div>
</div>