How to stretch the width of an element, so that it's 100% - widths of its siblings?

前端未结

关注

 11  2267

Say, I have the following unordered list. The button has width: auto. How do I style the elements, so #textField would stretch as much as possible,

相关标签:

11条回答

逝去的感伤

2020-12-12 19:05

/* ROBOTICCSS*/
/*  test in ff - works*/

ul{
width: auto;
padding: 0 80px 0 0;/* right padding >= button width */
list-style:none;
}

input.text_area{
width: 100%;
}

input.submit_button{
float: right;
margin: 0 -80px 0 0;/* match above value */
}

<!--HTML -->
<ul>
  <li>
      <input class="text_area" type="text" />
      <input class="submit_button" type="button" value="Submit"/>
  </li>
</ul>

0 讨论(0)

被撕碎了的回忆

2020-12-12 19:06
Try this:

HTML
```
<ul>
  <li>
    <input id="textField" type="text" /><input value="Button!" class="btn"type="button" />
  </li>
</ul>
```
CSS
```
ul li {
    width:100%;
}

#textField, .btn {
    float:left;
}

#textField {
    width:70%;
}

.btn {
    width:auto;
}
```
Here is a demo:

http://jsfiddle.net/andresilich/RkCvf/

Here are a couple of more demos i made for your consideration.

This demo is using CSS3's flex-box model to stretch the input field across its region without a given width. There is no support for IE8 and below though.

And this demo imitates a table by only using CSS. It is supported by IE8 and above.
0 讨论(0)
发布评论:

提交评论
- 加载中...

别那么骄傲

2020-12-12 19:08

How about this?

<ul>
  <li>
    <input id='textField' style='width: 80%'/><input type='button' style='width: 20%'/>
  </li>
</ul>

0 讨论(0)

孤独总比滥情好

2020-12-12 19:11

Do it per javascript. take width of li minus length of button and set the width of the textbox to this. But keep the boxmodel in mind. Without javascript I have not really an idea.

0 讨论(0)
发布评论:

提交评论
- 加载中...

醉酒成梦

2020-12-12 19:12

This is possible with CSS in user agents with CSS-2.x-supporting layout engines:

  …
  <style type="text/css">
    .full-width {
      width: 100%;
    }

    .table {
      display: table;
    }

    .row {
      display: table-row;
    }

    .cell {
      display: table-cell;
    }
  </style>
</head>

<body>
  <ul class="table">
    <li class="row">
      <span class="cell full-width">
        <input type="text" id="textField" class="full-width" />
      </span>
      <span class="cell">
        <input type="button" value="foobar" />
      </span>
    </li>
  </ul>
</body>

Tested positive in the following browsers:

Chromium 16.0.912.75 (Developer Build 116452 Linux), Apple WebCore 535.7
Chromium 16.0.912.63 (Developer Build 113337 Linux), Apple WebCore 535.1

Please note that paddings and margins on input elements will interfere because of the fixed width.

But: I can see no good reason why you should not use a table element here (tables and CSS do mix). Semantically it would make sense (the table would be serializable), and compatibility will be very likely better than with the CSS display property values above:

<body>
  <ul>
    <li>
      <table class="full-width"
             summary="Input text field with &#8220;foobar&#8221; button">
        <tr>
          <td class="full-width">
            <input type="text" id="textField" class="full-width" />
          </td>
          <td>
            <input type="button" value="foobar" />
          </td>
        </tr>
      </table>
    </li>
  </ul>
</body>

It is also possible that you should have used only a table element here in the first place.

0 讨论(0)

上一页 1 2