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
}

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

2 个答案: