Вопрос по css, html – макет flexbox

32

од:

<div style="width:400px">
    some text..
    <input type="text" />
    <button value="click me" />
</div>

Как сделать так, чтобы элемент ввода расширялся, чтобы заполнить все оставшееся пространство, оставаясь на той же строке? Если я поставлю 100%, он пойдет на собственную линию ...

Ваш Ответ

3   ответа
54

Видеть: http://jsfiddle.net/thirtydot/rQ3xG/466/

Это работает в IE7 + и во всех современных браузерах.

.formLine {
    overflow: hidden;
    background: #ccc;
}
.formLine input {
    width: 100%;
}
.formLine label {
    float: left;
}
.formLine span {
    display: block;
    overflow: hidden;
    padding: 0 5px;
}
.formLine button {
    float: right;
}
.formLine input, .formLine button {
    box-sizing: border-box;
}
<div class="formLine">
    <button>click me</button>
    <label>some text.. </label>
    <span><input type="text" /></span>
</div>

button должен идти первым в HTML. Немного неприятный, но c'est la vie.

Ключевым шагом является использованиеoverflow: hidden;: почему это необходимо, объясняется по адресу:

http://colinaarts.com/articles/the-magic-of-overflow-hidden/#making-room-for-floatsКак работает контекст блочного форматирования CSS?

Дополнительный промежуток вокругinput необходимо, потому чтоdisplay:block; не влияет наinput: Что в CSS / DOM предотвращает расширение поля ввода с блоком display: block до размера его контейнера?

box-sizing не поддерживается IE7 и ниже. pixelfreak
@AdrienBe:Ну вот. thirtydot
Там твой +1 я обещал вчера :) mattytommo
@thirtydotoverflow:hidden кажется, делает большую часть магии, в противном случае элемент блока переместится на следующую строку. Любое объяснение этому? Спасибо Adrien Be
@pixelfreak: правда, но использованиеbox-sizing здесь не обязательно, так что это не имеет значения. thirtydot
4

вы можете использовать таблицу

<table>
  <tr>
    <td>some text</td>
    <td><input type="text" style="width:100%" /></td>
    <td><button value="click me" /></td>
  </tr>
</table>

Если вы не можете использовать таблицу, это будет сложнее. Например, если вы точно знаете ширину некоторого текста, вы можете попробовать это следующим образом:

<div style="padding:0px 60px 0px 120px;">
  <div style="width:120px; float:left; margin:0px 0px 0px -120px;">some text</div>
  <input type="button" style="width:50px; float:right; margin:0px -55px 0px 0px;" />
  <input type="text" style="width:100%;" />
</div>
Лучшее решение когда-либо !!! спасибо и +1 GETah
0

= 9), используйтемакет flexbox:

div{
  background-color: red;
  display: flex;
  display: -webkit-flex;
  display: -ms-flex;
  display: -moz-flex;
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
}
div input {
    flex: 1;
    -webkit-flex:1;
    -ms-flex: 1;
    -moz-flex: 1;
    min-width: 200px;
}

Похожие вопросы