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

前端未结

关注

 11  2266

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 18:56

I ended up using a table and stretch the cell that contains the text field:

<ul>
  <li>
    <table>
      <tr>
        <td width="100%"><input width="100%" id="textField" type="text" /></td>
        <td><input type="button" width="auto" /></td>
      </tr>
    </table>
  </li>
</ul>

0 讨论(0)

余生分开走

2020-12-12 18:58

<ul>
  <li style="position:relative; width:100%;">
    <input id="textField" type="text" style="position:absolute; left:0px; right:80px" />
    <input type="button" value="Submit" style="position:absolute; right:0; width:auto" />
  </li>
</ul>

Adjust right:80px to set margin between textbox and button;

0 讨论(0)

[愿得一人]

2020-12-12 18:59

Maybe this can help, if you can define maxlength on the input box:

/* CSS */

ul{ 
    float:left; 
    border:1px solid #000; 
    padding:0; 
    position:relative; 
    width:20%; 
    height:25px; 
}

ul li{ 
    float:left; 
    margin:0; 
    padding:0; 
    border:0; 
    list-style-type:none; 
    width:100%; height:100%; 
    position:relative; 
}

ul li input{ 
    margin:0; padding:0; border:0; 
}

ul li input[type='text']{ 
    float:left; 
    width:100%; height:100%; 
    text-indent:10px;  
}

ul li input[type='submit']{  
    position:absolute; right:0; 
    width:auto; height:100%; 
}

/* HTML */

<body>

    <ul>
        <li>
            <input type="text" /><input type="submit" value="Submit" />
        </li>
    </ul>

</body>

The code basically keeps the input[type='text'] to a width of 100% and positions the button absolute to the parent li. This width of the button is auto and the height is 100% to cover up the textbox. You can then set a maxlength on the textbox to prevent the text from being hidden by the button.

0 讨论(0)

余生分开走

2020-12-12 19:04

This is pretty close to the desired result:

<!DOCTYPE html>
<html lang="en">
<head>
<style>
li { width: 100%; border: 1px solid black; display: block; text-align: justify; }
span { display: inline-block; }
span { width: 100%; }
#foo { display: inline-block; width: 90%; border: 1px solid red; }
#foo input { display: block; width: 100%; }
</style>
</head>

<ul>
  <li>
    <object id="foo"><input type="text"></object> <object><input type="button" value="1234567890"></object>
      <span></span>
  </li>
</ul>

</html>

0 讨论(0)

春和景丽

2020-12-12 19:05

You can quickly achieve this effect using a mixture of float and overflow: hidden:

<ul>
    <li>
        <input class="btn" type="button" value="Submit"/>
        <div class="inputbox"><input id="textField" type="text" /></div>
    </li>
</ul>

CSS:

ul { 
  list-style: none; 
  padding: 0; }
.btn { float: right; }
.inputbox { 
  padding: 0 5px 0 0;
  overflow: hidden; }
.inputbox input { 
  width: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

Preview (with box-sizing): http://jsfiddle.net/Wexcode/E8uHf/546/

Here is how it looks without box-sizing: http://jsfiddle.net/Wexcode/E8uHf/

0 讨论(0)

予麋鹿

2020-12-12 19:05

Tables and positioning are not required at all. The answer is to float one element left, and the other right.

http://jsfiddle.net/johnallan/HeUSN/

HTML:

<ul>
<li class="media attribution">
<button class="button" >Press Me</button>
<div class="copy">b blah blah blah blah blah blah blah blah blahblah blah blahblah blah blah  blah blah blahblah blah blahblah blah blahblah blah blah blah blah blahlah blah blah</div>
</li>
</ul>

CSS:

.media{ border:1px solid black }
.media, .copy{overflow:hidden; _overflow:visible; zoom:1;}
.media .button{float:left; margin-right: 10px;}

0 讨论(0)

1 2 下一页