Как сделать так, чтобы размеры элементов div изменялись автоматически? - PullRequest
Новая
       15

Как сделать так, чтобы размеры элементов div изменялись автоматически?

2 голосов
/ 17 марта 2010

Я пытаюсь создать небольшой фрагмент HTML (элемент div), состоящий из трех частей: метки, текстового поля и кнопки.

Внутри этого элемента div метка будет слева (автоматически изменяемый размер), кнопка будет справа (опять же, автоматически изменяемый размер), и текстовое поле должно занимать все оставшееся пространство внутри родительского элемента div.

Это то, что я пробовал (если я хочу, чтобы мои div были шириной 400 пикселей): 

<div style="width:400px">
    <div style="float: left">Label</div>
    <input style="width:100%">  <!-- doesn't work -->
    <button type='button' style='float: right'>Click</button>
</div>

Проблема в том, что размер моего текстового поля не изменяется автоматически. Добавить 'width = 100%' в текстовое поле не работает.

Как можно заставить его занимать все оставшееся пространство между ярлыком и кнопкой? В идеале это следует делать, просто применяя некоторые стили, а не вводя новые элементы.

(Я полагаю, что проблема связана не только с элементом div, но это просто мой сценарий работы.)

Ответы [ 3 ]

4 голосов
/ 17 марта 2010

Возможно, что-то подобное будет тем, что вы хотите. Да, я знаю, что это обман. И да, я согласен с @Paul re: label, поэтому я проверил его идентификатор. :)

РЕДАКТИРОВАТЬ: Обязательный Демонстрация самоссылки

Предупреждение: не тестируется во всех браузерах.

CSS: 

div {
  display: table;
  width: 400px;
  white-space: nowrap;
}

label {
  display: table-cell;
  padding-right: 3px;
  width: 1em;
}

input {
  display: table-cell;
  width: 100%;
}

span {
  display: table-cell;
  padding-left: 6px;
  width: 1em;
}

HTML: 

<div>
  <label for="my-very-special-input">Label</label>
  <input id="my-very-special-input"/>
  <span><button type="button">Click</button></span>
</div>
1 голос
/ 17 марта 2010

Поможет ли вам обернуть <input> в <div> с overflow: hidden? 

<div style="width: 400px;">
    <div style="float: left;">Label</div>
    <div style="overflow: hidden;">
        <input style="width: 100%;">
    </div>
    <button type="button" style="float: right;">Click</button>
</div>

См. xHTML / CSS: как заставить внутренний div получить ширину 100% минус другой div div .

И хотя это не по теме, обратите внимание, что ваш ярлык должен быть, ну, <label>. 

<div style="width: 400px;">
    <label for="my-very-special-input" style="float: left;">Label</label>
    <div style="overflow: hidden;">
        <input id="my-very-special-input" style="width: 100%;">
    </div>
    <button type="button" style="float: right;">Click</button>
</div>
1 голос
/ 17 марта 2010

Единственный способ, которым я мог придумать эту работу, был с процентами. Я вложил все в отдельные div (возможно, ненужные), а затем назначил проценты для каждого div. Взгляните: 

<div style="width=400px">
<div style="float:left; width:10%">Label</div>
<div style="float: left; width:70%"><input style="width:100%"></div>  <!-- doesn't work -->
<div style="float: right width:20%"><button type='button' style=''>Click</button></div>

Это ни в коем случае не идеальное решение, но, надеюсь, оно в какой-то степени удовлетворит ваши потребности.

Эллиот

...