Как растянуть ширину элемента, так что это 100% - ширина его братьев и сестер?

Скажем, у меня есть следующий неупорядоченный список. Кнопка имеет width: auto. Как я стилю элементы, поэтому #textField будет растягиваться как можно больше, поэтому ширина #textField и кнопка будут содержать до 100%? То есть #textField width == (100% ширины) - (вычисленная ширина кнопки).

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

Итак, допустим, 100% -ная ширина li равна 100 пикселям: если вычисленная ширина кнопки составляет 30 пикселей, ширина #textField будет 70 пикселей; если вычисленная ширина кнопки составляет 25 пикселей, ширина #textField будет равна 75px.

Ответы

Ответ 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/

Ответ 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/

Вот еще несколько демонстраций, которые я сделал для вашего рассмотрения.

Этот демонстрационный пример использует модель flex-box CSS3 для растягивания поля input по всей области без заданной ширины. Однако нет поддержки IE8 и ниже.

И this демо имитирует таблицу, используя только CSS. Он поддерживается IE8 и выше.

Ответ 3

Это возможно с помощью CSS в пользовательских агентах с CSS-2.x - поддержка механизмов компоновки:

  …
  <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 do mix). Семантически это имело бы смысл (таблица была бы сериализуемой), и совместимость будет очень вероятна лучше, чем с указанными выше значениями 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 здесь.

Ответ 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>

Ответ 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, чтобы установить поле между текстовым полем и кнопкой;

Ответ 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>

Код в основном сохраняет вход [type = 'text'] в ширину 100% и позиционирует кнопку абсолютным для родительского li. Эта ширина кнопки автоматически, а высота - 100%, чтобы закрыть текстовое поле. Затем вы можете установить максимальную длину в текстовом поле, чтобы предотвратить скрытие текста кнопкой.

Ответ 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>

Ответ 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>