Установите ширину `<fieldset>` на ширину самого большого содержащего элемента

Есть ли способ, чтобы ширина ширины <fieldset> была шириной самого большого поля внутри него?Установите ширину `<fieldset>` на ширину самого большого содержащего элемента

источник

2010-10-26 ziiweb

Единственный кросс-браузерный способ, о котором я могу думать, это заставить его вести себя как таблица, но это не идеально подходит для 'fieldset'. Заинтересованы в том, что произойдет? –

Можете ли вы дать нам несколько отзывов о том, удовлетворяют ли нижеприведенные решения? –

ли вы имеете в виду это: jsFiddle fieldset that is wide as biggest containing input-element

<form action="#" id="test" name="test"> 
    <fieldset> 
     <input type="text" class="first" /> 
     <input type="text" class="second" /> 
     <input type="text" class="third" /> 

    </fieldset> 

</form> 

fieldset{ 
    overflow: hidden; 
    float: left; 
    background-color: #eee; 
} 
input { 
    display: block; 
} 
input.first{ width: 150px; } 
input.second{ width: 200px; } 
input.third { width: 250px; }

Это плавающий FIELDSET. Если вы хотите по-другому, сообщите нам об этом.

источник

2010-10-26 09:04:13

Даже работает в IE6. Ницца. –

@Pekka Как всегда: сделать магию переполнения: скрытой; сделай трюк для тебя :) –

Просто поставьте свой вопрос в общем контексте. A <fieldset> является блочным элементом, поэтому его поведение по умолчанию заключается в расширении для заполнения доступного горизонтального пространства. Таким образом, у вас в основном есть два варианта:

Установите новую явную ширину.
Изменить его расположение от block к чему-то еще.

Вот краткий пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head><title></title> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
<style type="text/css"><!-- 
fieldset.explicit-width{ 
    width: 1%; /* Will expand to fit content */ 
} 
fieldset.inline-block{ 
    display: inline-block; 
} 
--></style> 
</head> 
<body> 

<fieldset><legend>Unstyled</legend> 
    <p><input type="text" size="2"></p> 
    <p><input type="text" size="20"></p> 
    <p><input type="text" size="50"></p> 
    <p><input type="text" size="30"></p> 
</fieldset> 

<fieldset class="explicit-width"><legend>Explicit width</legend> 
    <p><input type="text" size="2"></p> 
    <p><input type="text" size="20"></p> 
    <p><input type="text" size="50"></p> 
    <p><input type="text" size="30"></p> 
</fieldset> 

<fieldset class="inline-block"><legend>Inline-block</legend> 
    <p><input type="text" size="2"></p> 
    <p><input type="text" size="20"></p> 
    <p><input type="text" size="50"></p> 
    <p><input type="text" size="30"></p> 
</fieldset> 

</body> 
</html>

Update: Я забыл упомянуть, что плавающий элемент уровня блока изменяет также его расположение.

источник

2010-10-26 09:08:13

Установите ширину `<fieldset>` на ширину самого большого содержащего элемента

ответ

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