Question

例如，我有一个包含三个按钮的200px div，文本只是最小的，因此按钮不会填充可用的水平空间。有可能......

使最后一个按钮伸展以占据所有剩余空间吗？
第一个拉伸按钮以填充推动最后两个按钮的剩余空间？
拉伸中间按钮以填充推动最后一个按钮的剩余空间？

Answer 1

我已经意识到真正的问题是按钮不会拉伸，直到你给它们一个明确的宽度（即宽度：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>

我承认它不漂亮但会确保所有水平空间都已填满。可以通过使用我放在一起的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>

Answer 2

与Roberts相似：

<强> HTML

<div id="container">
    <button id="one">One</button><button id="two">Two</button><button id="three">Three</button>
</div>

<强> CSS

div#container {
    border: solid 1px;
    width: 200px;
}

div#container button {
    width: 33%;
}

div#container button:last-child {
    width: 34%;
}

这不允许流畅的布局：#container width必须已知，然后你做数学。

为了实现流畅的布局，您需要进入绝对定位的世界：

div#container {
    border: solid 1px;
    width: 50%; /* resize your browser window to see results */

    position: relative;
}

div#container button {
    position: absolute;
    width: 50px;
}

button#one {
    top: 0;
    left: 0;
}

button#two {
    top: 0;
    left: 55px;
}

button#three {
    width: auto !important; /* get rid of the 50px width defined earlier */
    top: 0;
    left: 110px;
    right: 0px;
}

注意#container的高度。它已经消失，因为这个例子中的所有孩子都是绝对定位的 - 你可以从边界看到它。

Answer 3

你不能像这样设置宽度......

<!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类;拉伸拉伸类的宽度％;添加了doctype。留下类型，可以在技术上删除只是一个例子，但是meh。

@rpflo：类型在那里，因为我的按钮在这个例子中不是提交按钮。如果这些是表单的一部分并且正在提交，我会将它们关闭，因为默认值为type = submit。（W3C HTML BUTTON）

CSS：内联元素拉伸以填充容器的可用水平空间

3 个答案: