消除输入文本和按钮css之间的间隙，并放置在相同的高度

Question

我试着看了几个其他问题，但似乎没有一个答案对我有帮助（我一定做错了什么）。

这是我的HTML表单：

        <form id = "username_form">
            <input id = "username_entry" type = "text" name ="username" placeholder="Enter Username Here" />
            <input type ="button" value = "" onClick = save()>
        </form>

以下是我与表单元素相关的CSS：

input[type="text"]{
height: 50px;
width: 400px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-topleft: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-top-left-radius: 5px;
font-size: 250%;
background-color: #e60000;
border: none;
color:black;}
input[type="button"]{
height: 50px;
width: 50px;
background-color: #e60000;
border: none;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-topright: 5px;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-top-right-radius: 5px;}
#username_form{
position: relative;
top:40%;
width: 100%;
margin: auto;
left:20%;}

我目前遇到的问题是，按钮和文本元素之间有一个奇怪的间隙，而且它们不在同一行。有什么帮助吗？谢谢，圣诞快乐！

Answer 1

使用float属性来提供帮助怎么样？

input[type="text"] {
  height: 50px;
  width: 400px;
  -moz-border-radius-bottomleft: 5px;
  -moz-border-radius-topleft: 5px;
  -webkit-border-bottom-left-radius: 5px;
  -webkit-border-top-left-radius: 5px;
  background-color: #e60000;
  border: none;
  float: left;
  padding: 0 1em;
}
input[type="button"] {
  height: 50px;
  width: 50px;
  float: left;
  background-color: #ccc;
  border: none;
  -moz-border-radius-bottomright: 5px;
  -moz-border-radius-topright: 5px;
  -webkit-border-bottom-right-radius: 5px;
  -webkit-border-top-right-radius: 5px;
}
#username_form {
  width: 100%;
  margin: auto;
  overflow: hidden;
}

<form id="username_form">
  <input id="username_entry" type="text" name="username" placeholder="Enter Username Here" />
  <input type="button" value="Save" onClick="save()">
</form>

以下是Codepen上的相同示例：http://codepen.io/anon/pen/XXjzYE

Answer 2

将此样式添加到按钮以消除文本框和按钮之间的间隙，并使它们位于同一行：

input[type="button"]{
position: absolute
}

要使文本框和按钮的高度相同，可以在CSS中任意更改它们的"高度"属性。例如：

input[type="text"]{
height: 48px
}