Блог

Главная - Вопросы по программированию - как увеличить ширину элемента с несколькими встроенными блоками на 100%

как увеличить ширину элемента с несколькими встроенными блоками на 100%

#css

#css

Вопрос:

Есть ли какой-либо способ увеличить ширину элемента из нескольких встроенных блоков до 100%?

HTML:

 <div>
  <select>
    <option>area code</option>
  </select>
  <input type="text" style="width:20%">
  -
  <input type="text" style="width:20%">
  -
  <input type="text" style="width:20%">
</div>

Комментарии:

1. не в состоянии точно понять, о чем вы спрашиваете, не могли бы вы, пожалуйста, объяснить свою проблему

2. вы упомянули ширину 20% для ваших встроенных элементов. Я не в состоянии понять вашу проблему. Не могли бы вы, пожалуйста, поделиться jsfiddle.net

3. Я думаю, что изображение ожидаемого результата помогло бы нам лучше понять вашу проблему.

Ответ №1:

Да, вы можете — но обратите внимание, что inline-block элементы имеют небольшое дополнительное нежелательное расстояние между ними, например, невидимое поле, которое можно удалить с помощью других методов, как показано Крисом на этой странице. Мне нравится использовать технику «Убрать пробелы».

Я вставил дефис «-» в div, чтобы мы могли присвоить ему также процентную ширину.

Также поля ввода были назначены box-sizing: border-box; таким образом, чтобы их заполнение было частью их ширины.

Вот ДЕМО-версия

HTML:

 <div class="wrap">
    <select>
        <option>area code</option>
    </select
    ><input type="text" 
    /><div class="sperator">-</div
    ><input type="text" 
    /><div class="sperator">-</div
    ><input type="text" />
</div>

CSS — файл:

 .wrap > *{
    display: inline-block;
    width: 24%;
}
.wrap > *.sperator{
    width: 2%;
    text-align: center;
}
input {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

Ответ №2:

Вы ищете что-то вроде этого: Демонстрационная ссылка

CSS:

 .form {
    width:100%;
}
.controls {
    display:inline-block;
    width:20%;
    margin:0 5px;
}
.controls select, .controls input {
    width:100%;
    border:1px solid #ccc;
}

Комментарии:

1. Поскольку внутри формы есть 4 элемента, ширина должна составлять 25%, но это не сработает в вашей скрипке из-за проблемы с пространством между строками.

Ответ №3:

css

 #f1 {
    width:100%;
    font-size:0;
}
.controls {
    display:inline-block;
    width:23%;
    margin:0 2% 0 0;
}
.controls select, .controls input {
    width:100%;
    border:1px solid #ccc;

}

HTML

  <div id="f1">
    <div class="controls">
        <select>
            <option>area code</option>
        </select>
    </div>
    <div class="controls">
        <input type="text"  />
    </div>
    <div class="controls">
        <input type="text"  />
    </div>
    <div class="controls">
        <input type="text"  />
    </div>
</div>

требуется ширина 100%