HTML-поле позволяет детям неограниченно расширяться

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

Адрес a test case. Следующий расширяется до бесконечности (бух):

<div style="width: 300px; overflow: hidden;"> 
    <fieldset> 
     <div style="overflow: scroll; white-space: nowrap;"> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lorem arcu, sodales non gravida eget, vehicula vitae nulla. Quisque turpis justo, consectetur ut egestas at, pulvinar nec diam. Donec porttitor lobortis elit quis scelerisque. Proin at mollis nibh. Nulla nisi dolor, rutrum nec rhoncus congue, cursus at urna. Curabitur adipiscing euismod nisl nec consequat. Aliquam justo justo, bibendum id molestie eget, dignissim sit amet sapien. Phasellus non erat nulla, quis auctor eros. Proin pellentesque turpis eu ipsum venenatis egestas non eget lacus. Vestibulum ante diam, posuere ut fringilla nec, pretium ac metus. Integer laoreet fringilla ipsum, vel interdum urna pellentesque a. Donec lobortis tincidunt nisi, ac tristique massa pretium ac. Ut vel magna erat, et hendrerit sem. Curabitur vulputate, tellus quis pellentesque pretium, felis odio aliquam sapien, sit amet hendrerit arcu orci ut nulla. Vestibulum suscipit rhoncus arcu, ut aliquam eros sagittis a. Suspendisse eros elit, bibendum venenatis pulvinar at, scelerisque vel quam. 
     </div> 
    </fieldset> 
</div>

Но if you use a div, он работает, как ожидалось (ура!):

<div style="width: 300px; overflow: hidden;"> 
    <div> 
     <div style="overflow: scroll; white-space: nowrap;"> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lorem arcu, sodales non gravida eget, vehicula vitae nulla. Quisque turpis justo, consectetur ut egestas at, pulvinar nec diam. Donec porttitor lobortis elit quis scelerisque. Proin at mollis nibh. Nulla nisi dolor, rutrum nec rhoncus congue, cursus at urna. Curabitur adipiscing euismod nisl nec consequat. Aliquam justo justo, bibendum id molestie eget, dignissim sit amet sapien. Phasellus non erat nulla, quis auctor eros. Proin pellentesque turpis eu ipsum venenatis egestas non eget lacus. Vestibulum ante diam, posuere ut fringilla nec, pretium ac metus. Integer laoreet fringilla ipsum, vel interdum urna pellentesque a. Donec lobortis tincidunt nisi, ac tristique massa pretium ac. Ut vel magna erat, et hendrerit sem. Curabitur vulputate, tellus quis pellentesque pretium, felis odio aliquam sapien, sit amet hendrerit arcu orci ut nulla. Vestibulum suscipit rhoncus arcu, ut aliquam eros sagittis a. Suspendisse eros elit, bibendum venenatis pulvinar at, scelerisque vel quam. 
     </div> 
    </div> 
</div>

Как я могу получить fieldset вести себя как div?

источник

2009-11-11 spudly

P.S. Я знаю, что могу исправить это, поставив статическую ширину на прокручиваемом элементе, но я абсолютно не хочу этого делать, поэтому, пожалуйста, не предлагайте этого. – spudly

Вам нужно использовать набор полей? Если все, что вам нужно, это что-то похожее на набор полей, mabye просто использует div как ваш второй фрагмент кода (с тех пор как он работает) и добавляет границу, чтобы он выглядел как набор полей? – Upgradingdave

Похоже, что этой проблемы не существует. Если вам действительно нужен набор полей, вы можете использовать div, а затем стилизовать его так, чтобы он выглядел как набор полей, но вы столкнулись с множеством проблем с перекрестным браузером и головными болями. Лучшее решение: реорганизовать форму, чтобы больше не использовать поля.

источник

2009-12-01 16:55:04 spudly

К сожалению, набор полей переполняется как «ожидаемый» в IE, но не в Chrome или Firefox. – row1

Я не уверен, если вы хотите, но это работает:

<div style="width: 300px; overflow: auto;"> 
    <fieldset> 
     <div style="overflow: auto; white-space: nowrap;"> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lorem arcu, sodales non gravida eget, vehicula vitae nulla. Quisque turpis justo, consectetur ut egestas at, pulvinar nec diam. Donec porttitor lobortis elit quis scelerisque. Proin at mollis nibh. Nulla nisi dolor, rutrum nec rhoncus congue, cursus at urna. Curabitur adipiscing euismod nisl nec consequat. Aliquam justo justo, bibendum id molestie eget, dignissim sit amet sapien. Phasellus non erat nulla, quis auctor eros. Proin pellentesque turpis eu ipsum venenatis egestas non eget lacus. Vestibulum ante diam, posuere ut fringilla nec, pretium ac metus. Integer laoreet fringilla ipsum, vel interdum urna pellentesque a. Donec lobortis tincidunt nisi, ac tristique massa pretium ac. Ut vel magna erat, et hendrerit sem. Curabitur vulputate, tellus quis pellentesque pretium, felis odio aliquam sapien, sit amet hendrerit arcu orci ut nulla. Vestibulum suscipit rhoncus arcu, ut aliquam eros sagittis a. Suspendisse eros elit, bibendum venenatis pulvinar at, scelerisque vel quam. 
     </div> 
    </fieldset> 
</div>

Вы можете удалить корневой DIV тоже, и он будет работать.

источник

2009-11-11 16:09:15

'не боится. Я не контролирую внешний div. Мне нужно сделать, чтобы fieldset занимал всю ширину внешнего div независимо от фактической ширины этого внешнего div. – spudly

Я отредактировал мой код, изменил переполнение: hidden; to overflow: auto; это помощь? –

Это: http://i29.tinypic.com/2hzi83q.png проблема, о которой вы говорите? – Franz

Это то, что вам нужно?

<div style="overflow: auto; width: 300px; height: 55px;"> 
    <fieldset style="overflow: scroll; width: 100%; white-space: nowrap;"> 
     <div> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lorem arcu, sodales non gravida eget, vehicula vitae nulla. Quisque turpis justo, consectetur ut egestas at, pulvinar nec diam. Donec porttitor lobortis elit quis scelerisque. Proin at mollis nibh. Nulla nisi dolor, rutrum nec rhoncus congue, cursus at urna. Curabitur adipiscing euismod nisl nec consequat. Aliquam justo justo, bibendum id molestie eget, dignissim sit amet sapien. Phasellus non erat nulla, quis auctor eros. Proin pellentesque turpis eu ipsum venenatis egestas non eget lacus. Vestibulum ante diam, posuere ut fringilla nec, pretium ac metus. Integer laoreet fringilla ipsum, vel interdum urna pellentesque a. Donec lobortis tincidunt nisi, ac tristique massa pretium ac. Ut vel magna erat, et hendrerit sem. Curabitur vulputate, tellus quis pellentesque pretium, felis odio aliquam sapien, sit amet hendrerit arcu orci ut nulla. Vestibulum suscipit rhoncus arcu, ut aliquam eros sagittis a. Suspendisse eros elit, bibendum venenatis pulvinar at, scelerisque vel quam. 
     </div> 
    </fieldset> 
</div>

источник

2009-12-01 17:23:46 Danny

Не совсем. Решение, которое вы предоставляете, добавляет полосу прокрутки как к внешнему div, так и к набору полей. Я хочу, чтобы div внутри поля задавал прокрутку. Вы протестировали свое решение? – spudly

WebKit и Firefox ограничивают fieldsets иметь «неявное» ширину на основе вычисленного ширины их содержимого. Вот как это сделать в каждом из них.

WebKit делает это относительно легко. Это поведение определено в таблице стилей по умолчанию, поэтому вы можете переопределить его, указав min-width: 0 для набора полей.
Firefox - это более жесткая гайка, потому что ограничения ширины поля устанавливаются глубоко в коде компоновки Gecko. К счастью, существует обходное решение: добавьте правило только для Gecko, чтобы установить свойство display для набора полей в значение, соответствующее одному из нескольких внутренних элементов таблицы.

Собираем все вместе:

fieldset { min-width: 0; } 

@-moz-document url-prefix() { /* Only target Gecko. (Breaks layout in IE.) */ 
    fieldset { display: table-cell; } 
}

jsFiddle demo.

Это основано на my answer к related question; вы можете сослаться на это для более полного объяснения, включая внутренние функции браузера gory, связанные с исправлением для Firefox.

источник

2013-07-29 11:13:19

очень полезно, спасибо – philfreo

Он работает! Мне не нравится принятый ответ ... И кто волнуется, если он сломает макет в IE? –

-1

запомнить

позицию: абсолютная не будет работать с дисплеем: ячейки таблицы Это то, что я есть, когда пытаются отладить гибкий макет

так просто имейте в виду, из него

источник

2015-07-23 07:09:45

HTML-поле позволяет детям неограниченно расширяться

ответ

Смежные вопросы