Я пытаюсь использовать display: table
с набором полей, но он не масштабируется должным образом. То же самое работает, если я изменяю <fieldset>
на <div>
.
Я попробовал с Safari и Firefox.
Я что-то пропустил?
Я пытаюсь использовать display: table
с набором полей, но он не масштабируется должным образом. То же самое работает, если я изменяю <fieldset>
на <div>
.
Я попробовал с Safari и Firefox.
Я что-то пропустил?
В принципе, рендеринг по умолчанию для fieldset не может быть фактически выражен в CSS. В результате браузеры должны реализовывать его в терминах, отличных от CSS, и это мешает применению CSS к элементу.
Практически любой элемент, который нельзя воссоздать с использованием чистого CSS, будет иметь проблемы такого рода.
Набор полей - это элемент со специальным поведением, поэтому, вероятно, это произойдет.
Добавьте еще одну оболочку div внутри вашей оболочки fieldset и используйте div. Смените поле в нормальном режиме или заблокируйте.
<fieldset style="background: pink; width: 100%">
<div style="display: table; width: 100%">
<div style="display: table-cell; background: red; width: 33%">a</div>
<div style="display: table-cell; background: green; width: 33%">b</div>
<div style="display: table-cell; background: blue; width: 33%">c</div>
</div>
</fieldset>
Когда вы меняете ширину fieldset
, вы меняете size
его border
. Его функция состоит в том, чтобы группировать элементы и нарисовать вокруг них границу. Его размер не влияет на содержимое внутри него. Итак, следуйте этому.
.fieldset {
display: table;
padding:0;
border:none;
}
.div {
display:table-cell;
border: 1px solid black;
width:calc(100vw * 1/3);
}
<fieldset class="fieldset">
<div class="div">1</div>
<div class="div">2</div>
<div class="div">3</div>
</fieldset>