Question

我在下面有一段简单的html表单代码。我想做的是使所有输入在面板内部都具有最大宽度，并看起来像下面的图像。

我尝试为面板内的所有输入设置最大宽度，但似乎不起作用。任何帮助将不胜感激。

defaultConfig {
        applicationId "live.company.appname.client"
      }

input[type="text"],
input[type="email"],
input[type="password"] {
  padding: 4px 20px;
  height: 35px;
  border: 1px solid black;
  margin: 10px;
  border-radius: 3px;
  max-width: 100%;
}

.form-panel {
  display: table;
  background-color: #b7bcbe;
}

Answer 1

您可以使用flex-box代替表格。

使用display: table时-列的宽度相同（没有colspan选项）

为每列使用display: flex并设置flex-grow: 1，以便所有元素都将长大并填充父元素。

input[type="text"],
input[type="email"],
input[type="password"] {
  padding: 4px 20px;
  height: 35px;
  border: 1px solid black;
  margin: 10px;
  border-radius: 3px;
  flex-grow: 1;
}

.form-row {
  flex-direction: row;
  display: flex;
}

.form-panel {
  background-color: #b7bcbe;
}

<body>
  <div class="form-panel">
    <div class="form-row form-name">
      <input type="text" name="fname" placeholder="First Name">
      <input type="text" name="lname" placeholder="Last Name">
      <br>
    </div>
    <div class="form-row form-email">
      <input type="email" name="email" placeholder="Email Address">
      <br>
    </div>
    <div class="form-row form-password">
      <input type="password" name="password" placeholder="Password">
      <input type="password" name="cpassword" placeholder="Comfirm Password">
    </div>
  </div>
  <input type="submit" class="btn btn-default submit-button" value="Sign up!">


</body>

Answer 2

您已经为所有输入元素编写了通用的CSS。为特定的输入字段编写了单独的CSS，并将其放在重要位置。

input[type="text"],
input[type="email"],
input[type="password"] {
  padding: 4px 20px;
  height: 35px;
  border: 1px solid black;
  margin: 10px;
  border-radius: 3px;
  max-width: 100%;
}

.form-panel {
  display: table;
  background-color: #b7bcbe;
}

<body>
  <div class="form-panel">
    <div class="form-name">
      <input type="text" name="fname" placeholder="First Name">
      <input type="text" name="lname" placeholder="Last Name">
      <br>
    </div>
    <div class="form-email">
      <input type="email" name="email" style="width: 100%;max-width: 86%;" placeholder="Email Address">
      <br>
    </div>
    <div class="form-password">
      <input type="password" name="password" placeholder="Password">
      <input type="password" name="cpassword" placeholder="Comfirm Password">
    </div>
  </div>
  <input type="submit" class="btn btn-default submit-button" value="Sign up!">


</body>

Answer 3

只需添加以下行：

.form-email input {width: calc(100% - 20px);}
                                       ^--------[margin-left + margin-right]

input[type="text"],
input[type="email"],
input[type="password"] {
  padding: 4px 20px;
  height: 35px;
  border: 1px solid black;
  margin: 10px;
  border-radius: 3px;
  max-width: 100%;
}

.form-panel {
  display: table;
  background-color: #b7bcbe;
}

.form-email input {width: calc(100% - 20px);}

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <div class="form-panel">
    <div class="form-name">
      <input type="text" name="fname" placeholder="First Name">
      <input type="text" name="lname" placeholder="Last Name">
      <br>
    </div>
    <div class="form-email">
      <input type="email" name="email" placeholder="Email Address">
      <br>
    </div>
    <div class="form-password">
      <input type="password" name="password" placeholder="Password">
      <input type="password" name="cpassword" placeholder="Comfirm Password">
    </div>
  </div>
  <input type="submit" class="btn btn-default submit-button" value="Sign up!">

HTML表单输入宽度

3 个答案: