例如,我有一个包含三个按钮的 200px div,文本很小,因此按钮不会填充可用的水平空间。有没有可能..
让最后一个按钮拉伸(stretch)以占据所有剩余空间?
要拉伸(stretch)以填充剩余空间的第一个按钮会插入最后两个按钮吗?
要拉伸(stretch)中间的按钮以填充剩余空间并插入最后一个按钮吗?
最佳答案
我意识到真正的问题是按钮不会拉伸(stretch),除非您给它们一个明确的宽度(即宽度: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(可行):嗯……无论出于何种原因,display: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>
我承认它不漂亮,但它会确保所有水平空间都被填满。它可以通过使用类似 this demo 中的类来稍微清理一下。我拼起来的尽管如此,当结合 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>
关于CSS:内联元素拉伸(stretch)以填充容器的可用水平空间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/989859/