非常简单的问题......我现在正在用浮动百分比破解它(但我知道必须有更好的解决方案)请以我的照片为例。我想让父级保持 100% 的宽度,并且搜索框是始终保持在搜索按钮旁边的自动宽度,并且我希望搜索按钮能够随心所欲地增长(取决于文本里面/填充)。
3 回答
更新(Flexbox 方式!)
现在实现这一目标的正确方法是使用 Flexbox!
CSS“Flexbox”方式(https://jsfiddle.net/1jxkyLdv/)
/* CSS
**************************************************************************/
/* Reset */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { margin: 1rem; }
h2 { margin: 2rem 0 0; }
/* Flexbox Example */
.flexbox { display: flex; }
.flexbox .stretch { flex: 1; }
.flexbox .normal { flex: 0; margin: 0 0 0 1rem; }
.flexbox div input { padding: .5em 1em; width: 100%; }
.flexbox div button { padding: .5em 1em; white-space: nowrap; }
<!-- HTML ------------------------------------------------------------------->
<h1>Flexbox Way!</h1>
<h2>Short Word</h2>
<section class="flexbox">
<div class="stretch">
<input type="text" placeholder="Search..." />
</div>
<div class="normal">
<button>Search</button>
</div>
</section>
<h2>Long Word</h2>
<section class="flexbox">
<div class="stretch">
<input type="text" placeholder="Search..." />
</div>
<div class="normal">
<button>Super Long Word For Search Button With Flexbox!</button>
</div>
</section>
老路
我鄙视使用表格或使用 css 使 div 像表格一样),但这是另一种方式。
CSS“表格单元”方式(http://jsfiddle.net/eUhTM/3/)
* { box-sizing: border-box; }
section { width: 100%; display: table; padding: 1em 0 0; }
div { display: table-cell; width: 100%; }
input { width: 100%; padding: .5em 1em; }
button { color: black; padding: .5em 1em; white-space: nowrap; margin: 0 0 0 1em; }
<h1>Short Word</h1>
<section>
<div>
<input type="text" placeholder="Search..." />
</div>
<div>
<button>Search</button>
</div>
</section>
解决方案
主要技巧是使该部分成为“显示:表格”;和“显示:表格单元格;”中的 div,您输入“宽度:100%”,您是按钮“空白:nowrap”。
不过,我仍然对解决方案感兴趣!
谢谢大家的精彩回答。
MrRioku 在评论中的正确答案
我原来的答案
由于显而易见的原因,这可能会被否决,但是这样做呢:
<table style="width:100%;">
<tr>
<td style="width:100%;">
<input type="text" placeholder="Search" style="width:100%;">
</td>
<td>
<input type="submit" value="Search">
</td>
</tr>
</table>
我使用内联 CSS 来简化查看:)
这确实有点棘手,尤其是如果您事先不知道按钮的宽度。您当然可以选择 js 解决方案,这应该相当简单,但我更喜欢尽可能坚持使用 css。
我确实想出了一个适用于您的布局的解决方案:
<div class='searchBox'>
<input type='text' placeholder='search...'/>
<button>Search</button>
</div>
.searchBox {
position: relative;
padding: 10px;
}
input {
box-sizing: border-box;
width: 100%;
border: 1px solid #999;
background: #fff;
padding: 10px;
}
button {
height: 40px;
background-color: #555;
padding: 0 10px;
border: none;
color: #fff;
position: absolute;
top: 10px;
right: 9px;
}
button:before {
content: '';
position: absolute;
display: block;
height: 40px;
top: 0px;
left: -10px;
width: 10px;
background: #fff;
border-left: 1px solid #999;
}
和一个小提琴:http: //jsfiddle.net/VhZS5/
不是最干净的解决方案,但它应该是跨(现代)浏览器(边框可能需要一些前缀),在语义上是正确的,并且它不使用表格。
请注意,我将按钮绝对定位在输入字段的顶部。然后我在按钮上使用 :before 稍微遮盖输入框,并在输入和按钮之间留下一些间距的印象。
如果您希望我进一步解释,请告诉我。