Question

这应该很简单，但我遇到了问题。

我有一个流畅的百分比容器，我需要文本输入并提交以对齐右边并且彼此相邻。

小提琴：http://jsfiddle.net/sarah3585/bamL87d4/

非常感谢

HTML：

<div class="header-search">
<form>
    <input type="text" name="search" placeholder="Search Website"/>
     <input type="submit" value="Go" />
</form>
</div>

CSS：

.header-search {
width:95%;
float:right;
background:yellow;
}

form {
display:block;
float:right;

}

input[type='text'] {
margin:0;
padding-left:40px;
width:80%;

}

input[type='submit'] {
float:right;
padding-left:16px;
padding-right:16px;
}

Answer 1

如果你没事，

input[type='text'] {
    margin:0;
    padding-left:40px;
    width:55%;
}

请参阅此fiddle.

或者您可以将整个代码简化为，

.header-search {
  background: yellow;
  width: 100%;
  float: right;
}
form {
  float: right;
}
input[type='text'] {
  padding: 0px 20px;
  text-align: center;
}

我不是专家，但我希望这有帮助。

Answer 2

fiddle 这是我的

因为您的表单没有width且input[type='text']没有float

右对齐流体容器中的输入字段

2 个答案: