Ustawia szerokość `<fieldset>` na szerokość największego elementu zawierającego

Czy istnieje sposób, aby szerokość <fieldset> była szerokość największego pola w środku?Ustawia szerokość `<fieldset>` na szerokość największego elementu zawierającego

Źródło

2010-10-26 ziiweb

Jedynym sposobem, jaki mogę zastosować w różnych przeglądarkach, jest to, że zachowuje się jak stół, ale nie jest to idealne rozwiązanie dla "zestawu pól". Interesuje Cię, co się pojawi –

Czy możesz nam powiedzieć, czy poniższe rozwiązania są satysfakcjonujące? –

Czy oznacza to: 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; }

Jest to pływający fieldset. Jeśli chcesz go w inny sposób, daj nam znać.

Źródło

2010-10-26 09:04:13

Działa nawet w IE6. Miły. –

@Pekka Jak zawsze: spraw, by magia przepełnienia: ukryta; załatw sobie sprawę :) –

Po prostu wpisz swoje pytanie w ogólnym kontekście. A <fieldset> jest elementem blokowym, dlatego jego domyślnym zachowaniem jest rozszerzanie w celu wypełnienia dostępnej przestrzeni poziomej. Zasadniczo masz dwie opcje:

Ustaw nową szerokość jawną.
Zmień jego układ z block na coś innego.

Oto krótki przykład:

<!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>

Aktualizacja: Zapomniałam wspomnieć, że pływający element poziomie bloku również zmienia swój układ.

Źródło

2010-10-26 09:08:13

Ustawia szerokość `<fieldset>` na szerokość największego elementu zawierającego

Odpowiedz

Powiązane problemy