如何使所有输入表单宽度为 100%答案

【问题标题】：How to make all input forms 100% width如何使所有输入表单宽度为 100%
【发布时间】：2018-09-22 20:46:16
【问题描述】：

我尝试了不同的方法来使所有输入表单的宽度相同，并让它们都以 100% 结束，但它不适用于下面的星座。有人知道如何实施这个想法吗？

<form action="" method="post">
                                                    
  <div class="form-group">
    <input type="text" class="form-control" style="width: 100%" placeholder="Card Number" data-securionpay="number" />
  </div>
                                                  
  <div class="form-group" >
    <input type="text" class="form-control" style="width: 32%" placeholder="CVC"/>
    <input type="text" class="form-control" style="width: 21%" placeholder="MM"/>
    <span> / </span>
    <input type="text" class="form-control" style="width: 42%" placeholder="YYYY"/>
  </div>
                                                  
  <button style="width: 100%" type="submit">Pay</button>
</form>

【问题讨论】：

标签： html css twitter-bootstrap width form-control

【解决方案1】：

嗨）这是一个惊人的 100% 自适应表单解决方案：

.form-block {
  padding: 20px 20px;
  border: 1px solid silver;
  max-width: 350px;
  margin: 0 auto;
  font-family: Arial;
  text-align: center;
}

.form-block form {
  width: 100%;
}

.form-block form input {
  width: calc(100% - 20px);
  padding: 5px 5px;
}

.form-block form textarea {
  width: calc(100% - 20px);
  padding: 5px 5px;
  font-family: Arial;
}

<div class="form-block">
  <form>
    <div class="form-group">
      <label>Name</label>
      <input type="text">
    </div>
    <div class="form-group">
      <label>Article</label>
      <input type="text">
    </div>
    <div class="form-group">
      <label>Description</label>
      <textarea></textarea>
    </div>
    <button>Send</button>
  </form>
</div>

【讨论】：

【解决方案2】：

因此，您可以探索的一个选项是 input-group 类，它是 Bootstrap 的 CSS for Forms 的一部分。这允许您将多个表单元素分组到一行中，它会自动为您分配宽度。

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
<script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script type='text/javascript' src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<form action="" method="post">
                                                    
<div class="form-group">
  <input type="text" class="form-control" placeholder="Card Number" data-securionpay="number" />
</div>
                                                  
<div class="form-group">
  <div class="input-group">
    <input type="text" class="form-control mr-2" placeholder="CVC"/>
    <input type="text" class="form-control" placeholder="MM"/>
    <div class="input-group-append input-group-prepend"><span class="input-group-text">/</span></div>
    <input type="text" class="form-control" placeholder="YYYY"/>
  </div>
</div>
                                                  
<button type="submit" class="btn btn-block btn-secondary">Pay</button>
</form>

这种方法的一个优点（因为它首先与使用 Bootstrap 有关）是您不依赖内联样式。如果您查看上面的代码，您会看到各种用于定位元素或将提交按钮转换为块元素等的 Bootstrap 实用程序类（如 .mr-2）。

【讨论】：

【解决方案3】：

试试这可能是你想要实现的目标

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<form action="" method="post">

  <div class="form-group">
    <input type="text" class="form-control" style="width: 100%" placeholder="Card Number" data-securionpay="number" />
  </div>

  <div class="form-group" >
    <input type="text" class="form-control" style="width: 32%; float: left" placeholder="CVC"/>
    <input type="text" class="form-control" style="width: 21%; float: left" placeholder="MM"/>
    <span> / </span>
    <input type="text" class="form-control" style="width: 42%; float: left" placeholder="YYYY"/>
  </div>

  <button style="width: 100%" type="submit">Pay</button>
</form>

【讨论】：

如果最后一个`float`是float: right，这可行，谢谢。

【解决方案4】：

您的所有元素都不是全宽，因为您将某些元素定义为具有其他宽度值，例如您在输入上定义的规则为 42%，如果您希望每个都是全宽，那么您应该删除所有属性宽度定义为小于 100% 的内联 css 样式。

从您的输入字段中删除此 style="width: 21%", style="width: 42%"。

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<form action="" method="post">

  <div class="form-group">
    <input type="text" class="form-control" style="width: 100%" placeholder="Card Number" data-securionpay="number" />
  </div>

  <div class="form-group" >
    <input type="text" class="form-control"  placeholder="CVC"/>
    <input type="text" class="form-control"  placeholder="MM"/>
    <span> / </span>
    <input type="text" class="form-control"  placeholder="YYYY"/>
  </div>

  <button style="width: 100%" type="submit">Pay</button>
</form>
</body>

【讨论】：

【解决方案5】：

你需要：

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

因为现在 div 用新空间分隔您的部分，但是如果您使用“内联块”，那么您的每个 div 都将关闭。这应该在一行中输入附近的输入。

【讨论】：