input with display: block n'est pas un bloc, pourquoi pas?

Question

input with display: block n'est pas un bloc, pourquoi pas?

Demandé el 23 de Juin, 2009: Quand la question a-t-elle été
27985 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

Pourquoi est - display:block;width:auto; sur ma saisie de texte se comportent pas comme un div et de remplir la largeur du conteneur? J'étais sous l'impression qu'un div est simplement un élément de bloc automatique de la largeur. Dans le code suivant ne devrait pas la div et l'entrée ont des dimensions identiques?

Comment puis-je obtenir l'entrée pour remplir la largeur. 100% de largeur ne fonctionnera pas parce que l'entrée a de rembourrage et une bordure (provoquant une largeur finale de 1px + 5px + 100% + 5px + 1px). Des largeurs fixes ne sont pas une option, je suis à la recherche de quelque chose de plus souple.

Je préfère une réponse directe à une solution de contournement, cela semble être une CSS caprice et de la compréhension, il peut être utile plus tard.

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

EDIT: je tiens à souligner que j'peuvent déjà le faire avec wrapper solutions de contournement. En dehors de cette vissage avec la page de la sémantique et de sélecteur CSS relations que j'essaie de comprendre la nature du problème et si il peut être dépassé par l'évolution de la nature de l'ENTRÉE elle-même.

EDIT 2: Ok, c'est VRAIMENT étrange! J'ai trouvé que la solution est de simplement ajouter max-width:100% d'une entrée avec width:100%;padding:5px;. Cependant, cela soulève encore plus de questions (qui je vais demander à une autre question), mais il semble que la largeur utilise la normale du modèle de boîte CSS et max-width utilise IE border-box modèle. La façon très étrange.

EDIT 3: Ok, ce dernier semble être un bogue dans FF3. IE8 et Safari4 limiter le max-width à 100% + padding + border qui est ce que la spec dit de faire. Enfin, c'est à dire quelque chose de droit.

EDIT 4: Oh mon dieu, c'est génial! Dans le processus de jouer avec cela, et avec beaucoup d'aide de la vénérable gourous de Dean Edwards et Erik Arvidsson, j'ai réussi à réunir le 3 séparée des solutions pour faire un vrai cross-browser 100% de largeur sur des éléments arbitraires de rembourrage et de frontières. Voir la réponse ci-dessous. Cette solution ne nécessite pas de supplément de balisage HTML, juste une classe (ou le sélecteur) et une option de comportement pour l'héritage IE.

Demandé el 23 de Juin, 2009 par SpliFF

Answer 1

5 Réponses

Answer 2

132voto

SpliFF Points 21945

Découvrez ce que j'ai trouvé, une solution à l'aide de la relativement inconnu box-sizing:border-box style de CSS3. Cela permet à un "vrai" 100% de largeur sur n'importe quel élément indépendamment du fait que des éléments de rembourrage et/ou des frontières.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">

    <title>Cross-browser CSS box-sizing:border-box</title>

    <style type="text/css">
    form {display:block; margin:0; padding:0; width:50%; border:1px solid green; overflow:visible}
    div, input {display:block; border:1px solid red; padding:5px; width:100%; font:normal 12px Arial}

    /* The voodoo starts here */
    .bb {
    	box-sizing: border-box; /* css3 rec */
    	-moz-box-sizing: border-box; /* ff2 */
    	-ms-box-sizing: border-box; /* ie8 */
    	-webkit-box-sizing: border-box; /* safari3 */
    	-khtml-box-sizing: border-box; /* konqueror */
    }
    </style>

    <!-- The voodoo gets scary. Force IE6 and IE7 to support IE5's box model -->
    <!--[if lt IE 8]><style>.bb {behavior:url("boxsizing.htc");}</style><![endif]-->
</head>

<body>
  <form name="foo" action="#">
    <div class="bb">div</div>
    <input class="bb" size="20" name="bar" value="field">
  </form>
</body>
</html>

Cette solution prend en charge IE6 et IE7 via un comportement écrite par Erik Arvidsson, avec des réglages de Dean Edwards à l'appui de pourcentage et d'autres non-largeurs en pixels.

Exemple de travail
Comportement (boxsizing.htc)

Répondu el 23 de Juin, 2009 par SpliFF (21945 Points )

Answer 3

9voto

MatrixFrog Points 11066

La raison à cela est que la saisie de texte de la taille est déterminée par la taille de l'attribut. ajouter size="50" à l'intérieur de la balise <input>. Ensuite modifier size="100" -- voyez ce que je veux dire?

Je pense qu'il y est une meilleure solution, mais la seule qui me vient à l'esprit est quelque chose que j'ai trouvé sur les fonctionnalités Cachées de HTML" question DONC: l'Utilisation d'un contenu modifiable div, au lieu d'une entrée. En passant l'entrée de l'utilisateur pour l'affichage de la forme (si c'est ce que vous avez besoin) peut être un peu délicat.

http://stackoverflow.com/questions/954327/hidden-features-of-html/954904#954904

Répondu el 23 de Juin, 2009 par MatrixFrog (11066 Points )

Answer 4

9voto

Jonathan Fingland Points 26224

votre meilleur pari est d’emballer l’entrée dans une div avec votre bordure, vos marges, etc.

 <!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 {
	border: 1px solid red;
	padding: 5px;
}
input, form {
	display: block;
	width: 100%;
}
</style>
</head>

<body>

    <form>
    	<div><input type="text" name="foo" /></div>
    </form>
</body>
</html>

Répondu el 23 de Juin, 2009 par Jonathan Fingland (26224 Points )

Answer 5

1voto

Jacob Points 33729

Vous pourriez faire semblant, comme ceci:

 <!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, #inputWrapper {
            border: 1px solid red;
        }
        #topDiv {
            padding: 5px;
            height: 5px;
        }
        form {
            display: block;
        }
        #inputWrapper {
            overflow: hidden;
            height: 15px;
        }
        input {
            display: block;
            width: 100%;
            border-style: none;
            padding-left: 5px;
            padding-right: 5px;
            height: 15px;
        }
        </style>
    </head>

    <body>
        <div id="topDiv"></div>
        <form>
          <div id="inputWrapper">
            <input type="text" name="foo" />
          </div>
        </form>
    </body>
</html>

Répondu el 23 de Juin, 2009 par Jacob (33729 Points )

Answer 6

1voto

AlexC Points 5215

Aussi, vous pourriez il, faux comme ceci :

Largeur : auto

Répondu el 23 de Juin, 2009 par AlexC (5215 Points )

input with display: block n'est pas un bloc, pourquoi pas?

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

input with display: block n'est pas un bloc, pourquoi pas?

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: