如果type = text和type = submit的字体大小不同，则搜索表单难看的对齐方式

Question

我想要的是：

• 文字类型和提交类型输入将以相同的高度并排
• 字体大小将有所不同（提交的字体大小为12，其他为16px。）
• 文本将在两个输入中垂直对齐

我也在CSS下面尝试了height和line-height几种组合，但是我无法实现。

如何使用CSS达到要求？

  .input, .submit{margin:0;padding:0;border:1px solid #000;} .submit{font-size:12px;} .input{font-size:16px;} 

  <form action="#" method="post"> <input class="input" type="text" name="search"><input class="submit" type="submit" value="SEARCH"> </form> 

Answer 1

使用line-height和vertical-align ：

 .input, .submit { margin: 0; padding: 0 10px; border: 1px solid #000; line-height:30px; vertical-align:middle; } .submit { font-size: 12px; } .input { font-size: 16px; } 

 <form action="#" method="post"> <input class="input" type="text" name="search"> <input class="submit" type="submit" value="SEARCH"> </form> 

Answer 2

 input{ display:inline-block; line-height:20px; } .input, .submit{margin:0;padding:0;border:1px solid #000;} .submit{font-size:12px; vertical-align:middle;padding:0px 5px;} .input{font-size:16px; vertical-align:middle;} 

  <form action="#" method="post"> <input class="input" type="text" name="search"><input class="submit" type="submit" value="SEARCH"> </form> 

Answer 3

这里的问题是，普通输入在其宽度和高度之外具有边框，而在内部提交输入。

解决方法是使用box-sizing：border-box； 对于两个输入。

Answer 4

将height ， box-sizing和vertical-align在一起

 .input, .submit { margin:0; padding:0; border:1px solid #000; /*added*/ height:25px; box-sizing:border-box; vertical-align:middle; } .submit{font-size:12px;} .input{font-size:16px;} 

 <form action="#" method="post"> <input class="input" type="text" name="search"> <input class="submit" type="submit" value="SEARCH"> </form> 

Answer 5

高度/线高似乎可以正常工作，尽管出于兼容性考虑，我会添加box-sizing 。

 .input, .submit { margin: 0; padding: 0; border: 1px solid #000; height: 16px; line-height: 16px; box-sizing:border-box; } .submit { font-size: 12px; } .input { font-size: 16px; } 

 <form action="#" method="post"> <input class="input" type="text" name="search"> <input class="submit" type="submit" value="SEARCH"> </form>