例如,我有一个包含三个按钮的200px div,文本只是最小的,因此按钮不会填充可用的水平空间.是否有可能..
使最后一个按钮伸展以占据所有剩余空间？
第一个按钮伸展以填充推动最后两个按钮的剩余空间？
中间按钮伸展以填充剩下的空间推动最后一个按钮？
Spl*_*iFF 13
我已经意识到真正的问题是按钮不会拉伸,直到你给它们一个明确的宽度(即宽度:100%).你仍然需要表格单元格来将100%限制为"适合的"模型.您可以在每个按钮上设置33%但如果动态添加按钮则不起作用(除非您计算服务器上的百分比).
方法1(不起作用):按钮不会扩展以适合行(即显示:表格单元格似乎被忽略).
<div style="display:table;width:200px">
<div style="display:table-row">
<button style="display:table-cell">1</button>
<button style="display:table-cell">2</button>
<button style="display:table-cell">3</button>
</div>
</div>
对于IE8之前的IE,您需要提供真实的表或兼容性脚本,如IE8-js.但基本概念很简单:
<!--[if ie lt 8]>
<script><!--pseudo-code, not real js-->
for (el in getElementsByTagName('button')) {
if el.style.find('display:table-cell') {
el.innerHTML = '<td><button>'+el.innerHTML+'</button></td>'
}
}
</script>
<![endif]-->
方法2(工作):嗯..无论出于何种原因,显示:table-cell样式对按钮元素不起作用.我能够通过一些额外的标记来做到这一点.
<div style="display:table;width:500px;">
<div style="display:table-row">
<div style="display:table-cell"> <button style="width:100%">1938274</button> </div>
<div style="display:table-cell"> <button style="width:100%">2</button> </div>
<div style="display:table-cell"> <button style="width:100%">3</button> </div>
</div>
</div>
我承认它不漂亮,但它会确保所有的水平空间都被填满.它可以通过使用像我放在一起的这个演示中的类来清理一下.然而,当结合IE的缺点时,这可能是我要说忽略纯粹主义者而只是使用表格的情况:
<style>table button {width:100%}</style>
<table style="width:500px;">
<tr> <td><button>1938274</button> <td> <button>2</button> <td> <button>3</button> </tr>
</table>
你不能像这样设置宽度吗...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>test css button stretch</title>
<style>
#btn_container
{
width: 200px;
}
#btn_container button
{
width: 20%;
}
#btn_container button.stretch
{
width: 58%;
}
</style>
</head>
<body>
<div id="btn_container">
<p>last button stretch...</p>
<button type="button">eat</button>
<button type="button">drink</button>
<button class="stretch" type="button">sleep</button>
<br>
<p>first button stretch...</p>
<button class="stretch" type="button">eat</button>
<button type="button">drink</button>
<button type="button">sleep</button>
<br>
<p>middle button stretch...</p>
<button type="button">eat</button>
<button class="stretch" type="button">drink</button>
<button type="button">sleep</button>
</div>
</body>
</html>
这似乎达到了预期的效果，是流畅的（如果 div 按钮容器的宽度更改或设置为 %），并且适用于 IE、Firefox 和 Opera。
编辑：删除了多余的 btn 类；提高了拉伸等级的宽度%；添加了文档类型。将类型保留为打开状态，从技术上讲可以将其删除，只是举个例子，但是嗯。
@rpflo：类型在那里，因为本示例中的按钮不是提交按钮。如果这些是表单的一部分并且正在提交，我会保留它们，因为默认值为 type=submit。（W3C HTML 按钮）