如何拉伸元素的宽度，使其 100% - 其兄弟元素的宽度？答案

【问题标题】：How to stretch the width of an element, so that it's 100% - widths of its siblings?如何拉伸元素的宽度，使其 100% - 其兄弟元素的宽度？
【发布时间】：2010-09-10 06:30:44
【问题描述】：

说，我有以下无序列表。该按钮有width: auto。如何设置元素的样式，以便#textField 尽可能地拉伸，所以#textField 和按钮的宽度加起来是 100%？ IE。 #textField 的宽度 ==（宽度的 100%）-（按钮的计算宽度）。

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

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

【问题讨论】：

你还需要考虑margin和padding属性。如果这些不为零，它可能看起来不像 100%，尽管它是。
您是否对我的回答投了反对票，如果是，为什么？
@PointedEars 我没有否决任何答案。
感谢您的回复。如果您发现它有用，我将不胜感激，因为它“不使用 table 或 JavaScript”即可达到预期效果，乍一看可能并不明显。

标签： html css

【解决方案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/

【讨论】：

这很好用，但是会改变 HTML 顺序，这会改变键盘 tab 的顺序，当按钮在文本输入之前获得焦点时，这会使许多键盘用户感到困惑。
您不能只使用tabindex 来纠正任何标签排序问题吗？
这可能会有所帮助，但请记住，tabindex 会覆盖 整个文档 的制表符顺序，而不仅仅是表单。也就是说，任何带有正值tabindex 的元素都将被移动到标签顺序的前面，并在页面上的任何其他元素之前导航到。 w3.org/TR/html401/interact/forms.html#adef-tabindex
对于您的普通表单，设置 Tab 键顺序并不太繁琐。这个解决方案非常可靠。
请注意：这称为块格式化上下文，在这里再看一个类似的问题。 stackoverflow.com/questions/1260122/…

【解决方案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 的 flex-box 模型在没有给定宽度的情况下将input 字段拉伸到其区域。但不支持 IE8 及以下版本。

而this demo 仅使用 CSS 来模拟表格。 IE8及以上版本支持。

【讨论】：

我不想给#textField设置宽度；我想让它伸展。例如，如果li 的宽度是 100px，而按钮的计算宽度是 30px，#textField 将是 70px；当按钮的计算宽度变为 40px 时，#textField 将变为 60px。
@WilliamNiu 你对 CSS3 的 flex-box 还满意吗？这是一个演示：jsfiddle.net/andresilich/NFEab
这似乎是一个不错的选择，但 IE 似乎不支持它... :-/
你支持IE多久了？还有display:table-cell 属性也可以用来获取最终结果，不过IE8+ 支持它。
另一个不错的建议！您为什么不在答案中提出这两个建议？我非常愿意至少支持这个答案。

【解决方案3】：

这可以通过用户代理中的 CSS 和 CSS-2.x-supporting 布局引擎实现：

  …
  <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（开发者内部版本 116452 Linux）、Apple WebCore 535.7
Chromium 16.0.912.63（开发者内部版本 113337 Linux）、Apple WebCore 535.1

请注意，input 元素上的内边距和边距会因为固定宽度而产生干扰。

但是：我知道没有充分的理由为什么你应该不使用table元素这里（表格和 CSS do 混合使用）。从语义上讲，它是有意义的（该表是可序列化的），并且兼容性很可能比上面的 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元素here。

【讨论】：

不是反对者，但我猜这是因为您仍在使用表格进行布局，尽管它们是样式化的。 CSS 纯粹主义者真的不喜欢这样。
那么也许那个人也没有真正阅读过答案，因为我没有在解决方案中使用table 元素。第二种变体只是一种选择。
向合唱团讲道，为两种可行的解决方案投票。
你不应该使用表格的原因是表格数据不是表格的。
@SamuelEdwinWard 取决于。试着这样看：我们这里有数据——input 元素——与其他数据成行关系——处理它的按钮。许多其他表单更明显是表格形式：行关系中的标签与它描述和引用的表单控件（通过for 属性）。我宁愿使用带有summary 属性的可序列化表来描述其内容（用于可访问性），而不是看到“纯CSS”解决方案在浏览器中分崩离析。但是，我将创建一个测试用例，看看“纯 CSS”解决方案的兼容性如何。

【解决方案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>

【讨论】：

利措，你有更好的建议吗？
对于初学者来说，CSS 有几个不同的 'display' 属性值，它们的作用与表格元素相同。 w3.org/tr/css21/visuren.html#propdef-display
我不认为仅仅因为他们使用表格而拒绝基于表格的解决方案是立即正确的。他们有时会占有一席之地。其他提出的解决方案都没有这个解决方案那么简单。
我愿意。以这种方式使用表格会破坏 HTML 的全部目的。

【解决方案5】：

这个怎么样？

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

【讨论】：

我不想为它们中的任何一个显式设置宽度。

【解决方案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设置文本框和按钮之间的边距；

【讨论】：

有趣的想法，但没有奏效。当您将元素位置设为绝对时，您需要显式设置位置和大小，这不是我想要的。我希望文本字段可调整大小。
我定义了left 和right 使它锚定到它的容器（必须有position:relative）而不是定义它的大小，它可以调整大小。
首先，由于某种原因，right 属性对我不起作用（在 Safari 中）。其次，我不想定义right 属性，因为我希望它能够自动调整右侧的button。

【解决方案7】：

根据 javascript 执行此操作。取 li 的宽度减去按钮的长度并将文本框的宽度设置为此。但请记住盒子模型。如果没有 javascript，我真的没有想法。

【讨论】：

【解决方案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;}

【讨论】：

【解决方案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>

代码基本上将 input[type='text'] 保持为 100% 的宽度，并将按钮绝对定位到父 li。这个按钮的宽度是自动的，高度是 100% 来覆盖文本框。然后，您可以在文本框上设置一个最大长度，以防止文本被按钮隐藏。

【讨论】：

文本input 中任何太长的内容都会被提交按钮截断。

【解决方案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>

【讨论】：

欢迎来到 Stackoverflow。感谢您的解决方案，如果您可以添加一些关于您发布的代码的描述，我们将更加感激。谢谢。

【解决方案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>

【讨论】：