CSS：内联元素拉伸以填充容器的可用水平空间 [英] CSS: Inline element stretch to fill available horizontal space of container

问题描述

例如，我有一个200px的div包含三个按钮，文本是最小的，所以按钮不填充可用的水平空间。

>

第一个按钮伸展以填充剩余空间，推动最后两个按钮？

拉伸以填充剩余空间，推动最后一个按钮？

解决方案

实现的真正的问题是按钮不会拉伸，直到你给他们一个显式的宽度（即，宽度：100％）。你仍然需要table-cells来约束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（工作）：嗯...无论什么原因，显示：table-cell style不适用于按钮元素。我可以用一些额外的标记做。

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




For example I have a 200px div containing three buttons, the text is only minimal so the buttons don't fill the horizontal space available. Is it possible to..

1. Make the last button stretch to occupy all the remaining space?

2. The First button to stretch to fill the remaining space pushing the last two buttons along?

3. The middle button to stretch to fill the remaining space pushing the last button along?

解决方案

I've realised that the real issue is buttons won't stretch until you give them an explicit width (ie, width:100%). You still need the table-cells though to constrain that 100% to a 'what will fit' model. You could just set 33% on each button but that won't work if your buttons are being added dynamically (unless you calculate the percentages on the server).

METHOD 1 (doesn't work): Buttons don't expand to fit the row (ie, display:table-cell appears to be ignored).

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

For IE prior to IE8 you'll need to feed a real table or a compatibility script like IE8-js. The basic concept is easy enough though:

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

METHOD 2 (works): Hmmm.. Well for whatever reason the display:table-cell style does not work on button elements. I was able to do it with some extra markup though.

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

I admit it ain't pretty but it will ensure all of the horizontal space is filled. It can be cleaned up a bit by using classes like in this demo I put together. Still, when combined with IE's shortcomings this is probably a case where I'd say ignore the purists and just use a table:

<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：内联元素拉伸以填充容器的可用水平空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！