单个输入框不会在其他输入框不调整大小的情况下调整大小

Question

非常简单。我正在尝试调整单个输入框的大小，但是当我尝试调整它们的大小时（使用类），它会调整每个框的大小。不知道哪里出了问题。这是代码：

    /* Centre the page */
    .body {
      margin: 0 auto;
      width: 450px;
      top: 50px;
      background-color: #444;
      overflow: hidden;
      position: relative;
      display: block;
      padding: 5px;
    }

    /* Centre the form within the page */
    form {
      margin:0 auto;
      text-align: center;
    }

    /* Style the text boxes */

    input, textarea {
      height:30px;
      background:#444;
      border:1px solid white;
      padding:10px;
      font-size:1.4em;
      color:white;
      font-family: 'Lato', sans-serif;
    }

    input:focus, textarea:focus {
      border:1px solid white;
      color: white;
    }

    #submit {
      height: 50px;
      cursor: pointer;
    }

      #submit:hover {
      background-color:#005f5f ;
    }

    .info {
      size: 175px;
    }

    .message {
      size: 400px;
    }

<div class="body">
  <form method="post" action="../php/index.php">
        
      <input class="info" name="name" placeholder="What's your name?">
            
      <input class="info" name="email" type="email" placeholder="What's your email?">
            
      <textarea class="message" name="message" placeholder="How can I help?"></textarea>
            
      <input class="info" id="submit" name="submit" type="submit" value="Submit">
        
  </form>
 </div>

如有任何帮助，我们将不胜感激。我知道代码很乱，我一直在尝试一切，所以我没有时间清理它。提前致谢！

Answer 1

您所有输入的 class 都是相同的，即。信息。所有具有相同 class 的输入都将得到相同的 styles.So，您的调整大小将应用于所有输入。为要调整大小的输入提供不同的 class，或者最好提供一个 ID，然后使用 CSS 调整它的大小。由于 info 只有内部指定的宽度，其他方面不会改变。

Answer 2

size 不是调整 html 输入 according to the HTML specification 大小的精确方法。我建议使用例如：width: 10em 或 width: 20px 来调整输入的宽度。

对于 CSS，您可以使用名称属性来指定您想要具有不同宽度的元素。

.info[name='email'] {
  width: 12em;
}

.info[name='name'] {
  width: 13em;
}

<input class="info" name="name" placeholder="What's your name?">            
<input class="info" name="email" type="email" placeholder="What's your email?">

对不同的元素使用不同的 class name 也可以。

.info-long {
  width: 130px;
}

.info-short {
  width: 100px;
}

<input class="info-long" name="name" placeholder="What's your name?">            
<input class="info-short" name="email" type="email" placeholder="What's your email?">

运行以下代码段是不同宽度输入表单的示例。

/* Centre the page */
    .body {
      margin: 0 auto;
      width: 450px;
      top: 50px;
      background-color: #444;
      overflow: hidden;
      position: relative;
      display: block;
      padding: 5px;
    }

    /* Centre the form within the page */
    form {
      margin:0 auto;
      text-align: center;
    }

    /* Style the text boxes */

    input, textarea {
      height:30px;
      background:#444;
      border:1px solid white;
      padding:10px;
      font-size:1.4em;
      color:white;
      font-family: 'Lato', sans-serif;
    }

    input:focus, textarea:focus {
      border:1px solid white;
      color: white;
    }

    #submit {
      height: 50px;
      cursor: pointer;
    }

      #submit:hover {
      background-color:#005f5f ;
    }

    .info[name="name"] {
      width: 13em;
    }

    .info[name='email'] {
      width: 12em;
    }

    .message {
      width: 400px;
    }

<div class="body">
  <form method="post" action="../php/index.php">
        
      <input class="info" name="name" placeholder="What's your name?">
            
      <input class="info" name="email" type="email" placeholder="What's your email?">
            
      <textarea class="message" name="message" placeholder="How can I help?"></textarea>
            
      <input class="info" id="submit" name="submit" type="submit" value="Submit">
        
  </form>
 </div>

单个输入框不会在其他输入框不调整大小的情况下调整大小

Individual input box won't resize without others resizing as well

html

css

resize

input