使 HTML 输入元素大小相同答案

【问题标题】：Make HTML Input Elements the same size使 HTML 输入元素大小相同
【发布时间】：2018-08-12 01:18:29
【问题描述】：

我有 2 个 HTML 容器，但是因为我有 span 元素，后跟一个文本输入（我认为这是问题所在？），我无法让容器中的内容以我想要的方式居中。有没有办法在这些元素上推动边距或填充？或者有没有更简单的方法。在 JSFiddle 中，它们的跨度非常大，但我希望它们与下图的大小差不多。我正在使用引导程序。

<div class="container" >
  <div class="row">
    <div class="col-sm">
      <h2>TITLE</h2>
    </div>
  </div>

  <div class="row">
    <div class="col-sm">
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text">text</span>
        </div>
        <input type="text" class="form-control" id='text' readonly>
      </div>
    </div>
 </div>

JSFIDDLE：https://jsfiddle.net/oy4u1sm9/4/

理想的格式（当然没有大跨度元素）

【问题讨论】：

标签： html css twitter-bootstrap bootstrap-4

【解决方案1】：

使用<span> 标签作为标签并不是最佳做法，因为它们是内联元素。尝试始终使用<label> 标签。这是您的代码调整以匹配您想要的样式。更多 cmets 在下面的小提琴中。

<div class="row mb-5">
  <div class="col-sm-6" align="center">
    <label class="h3">TITLE</label>
    <div class="input-group">
      <input type="text" class="form-control" id="text" placeholder="text" required>
    </div>
  </div>
  <div class="col-sm-6" align="center">
    <label class="h3">TITLE</label>
    <div class="input-group">
      <input type="text" class="form-control" id="text" placeholder="text">
    </div>
  </div>
</div>

为了清楚起见，我在代码中做了一些 cmets。给你：

https://jsfiddle.net/hmLpdnqa/

【讨论】：

【解决方案2】：

您刚刚包含了错误的引导文件。试试这个，看看您的问题是否已解决。

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

 <div class="container">
    <!-- ROW 1 -->
    <div class="row">
      <div class="col" align="center">
        <h2>TITLE</h2> </div>
      <div class="col" align="center">
        <h2>TITLE</h2></div>
    </div> <!-- ROW 1 -->
    <!-- ROW 2 -->
    <div class="row">
      <div class="col-sm" align="center">
        <input type="text" class="form-control" id="text" placeholder="text" required>
      </div>
      <div class="col-sm" align="center">
        <input type="text" class="form-control" id="text" placeholder="text">
      </div>
    </div> <!-- ROW 2 -->
   
<br>
<div class="container" >
  <div class="row">
    <div class="col-sm">
      <h2>TITLE</h2>
    </div>
  </div>

  <div class="row">
    <div class="col-sm">
      <div class="input-group mb-3">
        <div class="input-group-prepend">
          <span class="input-group-text">text</span>
        </div>
        <input type="text" class="form-control" id='text' readonly>
      </div>
    </div>
  </div>
  

</div>

【讨论】：