CSS: Inline element stretch to fill available horizontal space of container

前端未结

关注

 3  1361

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

相关标签:

3条回答

余生分开走

2021-02-05 07:49

Similar to 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%;
}

That doesn't allow for a fluid layout: #container width must be known, then you do the math.

To allow for a fluid layout you need to hop into the world of absolute positioning:

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

Watch out for the height of #container. It's gone since all it's children in this example are absolutely positioned--you can see that from the border.

0 讨论(0)

梦毁少年i

2021-02-05 08:13

Can't you just set the widths like so...

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

This seems to get the desired effect, is fluid (if the div button container's width is changed or set to a %), and works in IE, Firefox and Opera.

edit: removed the redundant btn class; bumped up the width % for the stretch class; added the doctype. Left the types on, could technically haved removed for just an example, but meh.

@rpflo: the types are in there because my buttons in this example are not submit buttons. If these were part of a form and were submitting, I'd have left them off since the default is type=submit. (W3C HTML BUTTON)

0 讨论(0)

再見小時候

2021-02-05 08:15
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:
```

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>
```
0 讨论(0)
发布评论:

提交评论
- 加载中...