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

所有输入的类都是相同的ie。信息。具有相同类的所有输入将获得相同的样式。因此，您的调整大小将适用于所有这些。为要调整大小的输入提供不同的类，或者优先提供id，然后使用CSS调整大小。由于信息只有其中指定的宽度，因此其他方面不会发生变化。

Answer 2

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

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

.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?">

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

＆＃13;

/* 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;
    }

＆＃13;

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

＆＃13;

如果没有其他人调整大小，个别输入框也不会调整大小

2 个答案: