Dlaczego display:block;width:auto;
mój tekst nie zachowuje się jak element DIV i nie wypełnia szerokości kontenera?
Miałem wrażenie, że div to po prostu element blokowy z automatyczną szerokością. Czy w poniższym kodzie div i wejście nie powinny mieć identycznych wymiarów?
Jak uzyskać dane wejściowe, aby wypełnić szerokość? 100% szerokości nie będzie działać, ponieważ dane wejściowe mają wypełnienie i obramowanie (co daje końcową szerokość 1 piksela + 5 pikseli + 100% + 5 pikseli + 1 piksel). Stałe szerokości nie wchodzą w grę, a ja szukam czegoś bardziej elastycznego.
Wolałbym bezpośrednią odpowiedź na obejście. Wygląda to na dziwactwo CSS i zrozumienie tego może być przydatne później.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>width:auto</title>
<style>
div, input {
border: 1px solid red;
height: 5px;
padding: 5px;
}
input, form {
display: block;
width: auto;
}
</style>
</head>
<body>
<div></div>
<form>
<input type="text" name="foo" />
</form>
</body>
</html>
Powinienem zaznaczyć, że mogę już to zrobić dzięki obejściom opakowania. Oprócz tego pieprzenia się z semantyką strony i relacjami selektorów CSS, próbuję zrozumieć naturę problemu i czy można go rozwiązać, zmieniając naturę samego WEJŚCIA.
Ok, to jest NAPRAWDĘ dziwne! Odkryłem, że rozwiązaniem jest po prostu dodanie max-width:100%
do danych wejściowych za pomocą width:100%;padding:5px;
. Jednak powoduje to jeszcze więcej pytań (które zadam w osobnym pytaniu), ale wydaje się, że width korzysta z normalnego modelu CSS box, a max-width korzysta z modelu border-box przeglądarki Internet Explorer. Jakie to dziwne.
Ok, ten ostatni wydaje się być błędem w Firefoksie 3. Internet Explorer 8 i Safari 4 ograniczają maksymalną szerokość do 100% + dopełnienie + obramowanie, co mówi specyfikacja. Wreszcie Internet Explorer ma coś w porządku.
O mój Boże, to jest niesamowite! W trakcie zabawy i przy dużej pomocy czcigodnych guru, Deana Edwardsa i Erika Arvidssona , udało mi się złożyć razem trzy oddzielne rozwiązania, aby stworzyć prawdziwą 100% szerokość między przeglądarkami na elementach z dowolnym wypełnieniem i obramowaniami. Zobacz odpowiedź poniżej. To rozwiązanie nie wymaga żadnych dodatkowych znaczników HTML, wystarczy klasa (lub selektor) i opcjonalne zachowanie dla starszej wersji programu Internet Explorer.
input
elementów, które najwyraźniej nie są zgodne ze specyfikacją CSS 2.1, podczas gdy pytanie, do którego utworzyłeś łącze, dotyczy tego, jak zapobiec przepełnieniu pól, które, nawiasem mówiąc, występuje idealnie w granicach specyfikacji CSS 2.1. Zarówno pytania, jak i ich rozwiązania pokrywają się, ale nazywanie ich dokładnymi duplikatami jest po prostu błędne.