如何拉伸元素的宽度，以便它的100％宽度的兄弟姐妹？ [英] How to stretch the width of an element, so that it's 100% - widths of its siblings?

问题描述

说，我有以下无序列表。该按钮具有 width：auto 。如何对元素进行样式化，因此 #textField 将尽可能扩展，因此 #textField 的宽度该按钮将加起来100％？也就是说 #textField 的宽度==（宽度的100％） - （按钮的计算宽度）。

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, so the width of #textField and the button would add up to 100%? I.e. #textField's width == (100% of width) - (button's computed width).

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

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

So, for example, let's say 100% width of li is 100 pixels: if the button's computed width is 30px, #textField's width would be 70px; if button's computed width is 25px, #textField's width would become 75px.

推荐答案

您可以使用 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/

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

这篇关于如何拉伸元素的宽度，以便它的100％宽度的兄弟姐妹？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！