Question

我尝试了不同的方法来使所有输入形式具有相同的宽度，并让它们以100％结束，但它不适用于下面的星座。有没有人知道如何实现这个想法？

＆＃13;

<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>

＆＃13;

Answer 1

您需要：

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

因为现在div将您的部分与新空间分开，但如果您使用＆＃34;内联块＆＃34;，那么您的每个div都将关闭。这应该在一行输入附近输入。

Answer 2

您的所有元素都不是全宽，因为您定义了一些元素以具有其他宽度值，例如您在输入上定义的规则为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>

Answer 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>

Answer 4

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

＆＃13;

<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>

＆＃13;

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

Answer 5

嗨，这是一个了不起的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>

如何使所有输入表单100％宽度

5 个答案: