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

例如，我有一个包含三个按钮的200px div，文本只是最小的，所以按钮不会填充可用的水平空间。是否有可能......CSS：内联元素拉伸以填充容器的可用水平空间

让最后一个按钮伸展以占据所有剩余空间？
第一个拉伸按钮以填充剩下的空间，推动最后两个按钮？
中间按钮可以伸展以填充剩下的空间，并按下最后一个按钮？

2009-06-13 ChrisInCambo

你就不能设置宽度是这样的...

<!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>

这似乎得到预期的效果，是流体（如股利按钮容器的宽度被改变，或者设置为％），并且可以在IE，Firefox和Opera中使用。

编辑：删除多余的btn类;碰到伸展类的宽度％;添加了doctype。只留下类型，技术上可能只是一个例子，但是meh。

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

来源

2009-06-13 04:10:01

什么是所有的类和类型？ – 2009-06-13 05:19:48

你说得对，我在想什么。我会编辑清理它。 – 2009-06-13 15:58:39

罗伯茨类似：

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的宽度必须知道，那么你做数学。

为了让您需要跳进绝对定位全球流动布局：

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的高度。它已经消失了，因为这个例子中的所有孩子都是绝对定位的 - 你可以从边界看到它。

来源

2009-06-13 05:19:09

这个例子在Firefox中似乎不适用于我，还没有尝试过任何其他浏览器。 – ChrisInCambo 2009-06-13 05:46:28

我已经意识到真正的问题是按钮不会伸展，直到你给他们一个明确的宽度（即，宽度：100％）。尽管如此，你仍然需要表格单元来将这个100％约束为“适合什么”模型。您可以在每个按钮上设置33％，但如果您的按钮被动态添加（除非您计算服务器上的百分比），则这不起作用。

方法1（不起作用）：按钮不会展开以适合行（即display：table-cell似乎被忽略）。

<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（工程）：嗯..那么无论什么原因，显示：表单元格样式并不按钮元件工作。尽管如此，我仍然能够做到这一点。

<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>

来源

2009-06-13 07:45:05 SpliFF

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

回答

相关问题