如何使提交輸入和文本輸入等距

Question

在您設置網頁樣式時，我注意到：

 <input type='text' placeholder='input1' />
 <input type='text' placeholder='input2' />
 <input type='submit'  />

的形式，並添加此CSS：

 input[type='text']{
    display:block;
}

input{
    width:400px;
}

我認為文本輸入的寬度和提交按鈕的寬度〜20px之間有些區別，但是如何使它們相等地變大呢？

這是一個片段

 input[type='text']{ outline:none; border:1px solid lightgrey; border-radius:3px; display:block; text-align:center; } input{ width:400px; } 

 <input type='text' placeholder='input1' /> <input type='text' placeholder='input2' /> <input type='submit' /> 

我嘗試休息一下邊距並填充它，但是為什么不起作用？

Answer 1

默認情況下，按鈕使用

box-sizing: border-box;

這意味着邊框（和所有填充）都包含在寬度中。 文本框沒有該規則，因此顯示為大2px（每個邊框分別為1px（左右））。

將框大小規則添加到文本框中，它們將具有相同的寬度。

Answer 2

發生這種情況是因為在占位符中將邊框和填充添加到總數中，因此此<input type="text" placeholder="input1" style="border-width: 1px; padding: 1px;"></input>成為占位符，占404像素。 （400 + 1像素右邊框+ 1像素左邊框+ 1像素左填充+ 1像素右填充）。

在提交的情況下，這： <input type="submit" style="border-width: 20px; padding: 20px;">變為具有寬邊框的400 px按鈕，但仍將是400 px寬度。 填充將主要影響文本，該文本仍將居中，因此不會很明顯。 如果您應用一些單邊填充，例如padding-right:300px ，您會注意到。