Question

说，我有以下无序列表。该按钮有width: auto。如何设置元素的样式，以便#textField尽可能地拉伸，因此#textField的宽度和按钮的总和将达到100％？即#textField的宽度==（宽度的100％） - （按钮的计算宽度）。

<ul>
  <li>
    <input id="textField" type="text" /><input type="button" />
  </li>
</ul>

因此，例如，假设li的100％宽度为100像素：如果按钮的计算宽度为30px，#textField的宽度将为70px;如果按钮的计算宽度为25px，#textField的宽度将变为75px。

Answer 1

您可以使用float和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; }

预览（带框尺寸）：http://jsfiddle.net/Wexcode/E8uHf/546/

以下是没有框大小调整的外观：http://jsfiddle.net/Wexcode/E8uHf/

Answer 2

试试这个：

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

这是一个演示：

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

以下是我为您考虑的几个演示。

This演示使用CSS3的弹性框模型在没有给定宽度的情况下在其区域内拉伸input字段。虽然IE8及以下版本不支持。

this演示只使用CSS来模仿表格。 IE8及以上版本支持它。

Answer 3

使用带有CSS-2.x的用户代理中的CSS可以实现这一点 - 支持布局引擎：

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

在以下浏览器中测试为阳性：

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

请注意，由于固定宽度，input元素上的填充和边距会发生干扰。

但是：我可以看到没有充分的理由为什么你不在这里使用table元素（表格和CSS 做混合）。在语义上它是有意义的（表可序列化），并且兼容性很可能比上面的CSS display属性值更好：

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

您可能也应该首先使用 table元素此处。

Answer 4

我最终使用了一个表并拉伸包含文本字段的单元格：

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

Answer 5

这个怎么样？

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

Answer 6

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

调整right:80px以设置文本框和按钮之间的边距;

Answer 7

按照javascript进行操作。取li的宽度减去按钮的长度，并将文本框的宽度设置为此。但请记住盒子模型。没有javascript我真的不是一个想法。

Answer 8

根本不需要表格和定位。答案是将一个元素向左浮动，另一个向右浮动。

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

Answer 9

如果您可以在输入框中定义maxlength，这可能会有所帮助：

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

代码基本上将输入[type ='text']保持为100％的宽度，并将按钮绝对定位到父li。按钮的宽度为自动，高度为100％以覆盖文本框。然后，您可以在文本框中设置maxlength，以防止文本被按钮隐藏。

Answer 10

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

Answer 11

这非常接近预期的结果：

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

如何拉伸元素的宽度，使其100％ - 其兄弟姐妹的宽度？

11 个答案: