第一个对不起,如果标题不是 100% 在桥上,我真的不知道如何撰写它。
无论如何,这是一个 100% 宽度布局的简单问题。我有一个位于流体容器内的表单,它有 - 1 个输入、1 个选择、1 个按钮,它们都是内联对齐(水平)
当我最小化窗口按钮然后选择列表它们向下移动时的问题。我不想要那个。
这是小提琴http://jsfiddle.net/4GSLE/中的一个示例,您可以最小化 html 部分,您将看到问题。
如何让他们在一条线上,而不是下移?
.main {
max-width: 1200px;
margin: 0px auto;
background-color: #eee;
line-height: 50px;
padding: 10px;
}
form {
padding: 0 0 0 0;
margin: 0 0 0 0;
display: block;
}
.clear {clear: both;}
input, select {
float: left;
height: 50px !important;
padding: 0 10px;
width: 66% !important;
border: 1px solid #d6d8db;
margin-right: 20px;
}
input.button {
height: 54px !important;
padding: 0 10px;
margin-top: -1px !important;
width: 125px !important;
border: 1px solid #d6d8db !important;
background: #333;
cursor: pointer;
color: #fff;
}
select {
width: 200px !important;
height: 52px !important;
}
html:
<div class="main">
<form>
<input type="text" name="" value="search" />
<select>
<option>select</option>
</select>
<input type="submit" name="" value="Search now" class="button" />
</form>
<div class="clear"></div>
</div>