d'une largeur de 100 mm,

Question

Quelqu'un sait-il pourquoi les éléments d’entrée avec une largeur de 100 % aller sur frontière de cellules de la table. Dans l’exemple simple ci-dessous boîte d’entrée aller au-dessus de la table cellules frontière, le résultat est horrible. Cela a été testé et il arrive de la même manière sur : FF, IE7 et Safari. A-t-elle un sens pour vous ? Je manque quelque chose, connaissez-vous une solution possible ?

Answer 1

Vous pouvez utiliser la propriété CSS3 box-sizing pour inclure le remplissage externe et la bordure:

 input[type="text"] {
     width: 100%; 
     box-sizing: border-box;
     -webkit-box-sizing:border-box;
     -moz-box-sizing: border-box;
}
 

Answer 2

Valeur de la largeur de ne pas tenir compte de la frontière ou de rembourrage:

http://www.htmldog.com/reference/cssproperties/width/

Vous obtenez 2px de remplissage de chaque côté, en plus de 1px de bordure de chaque côté.
100% + 2*(2px +1px) = 100% + 6px, ce qui est plus que le 100% des enfants de contenu parent td.

Vous avez la possibilité de:

• La création d' box-sizing: border-box; comme par @pricco de réponse;
• Ou à l'aide de 0 marge et le remplissage (en évitant la taille supplémentaire).

Answer 3

Le problème avec des choses comme l' width:95%; , c'est qu'ils ne regarde pas à droite dans l'échelle des mises en page flexibles (parce que 5% peut alors être de 30 pixels).

Les solutions suivantes fonctionne très bien pour moi (testé dans Firefox, IE 9, Safari):

<table style="background-color: blue; width: 100%;" cellpadding="0" cellspacing="0">
<tr>
    <td style="background-color: red;   padding: 3px;">
        <div style="margin-right: 3px;">
            <div style="padding-right: 3px;">
                <input type="text" style="width:100%;">
            </div>
        </div>
    </td>
    <td style="background-color: purple;   padding: 3px;">
        <div style="margin-right: 3px;">
            <div style="padding-right: 3px;">
                <input type="text" style="width:100%;">
            </div>
        </div>
    </td>
    <td style="background-color: green;   padding: 3px;">
        <div style="margin-right: 3px;">
            <div style="padding-right: 3px;">
                <input type="text" style="width:100%;">
            </div>
        </div>
    </td>
</tr>
</table>

(ajouté les couleurs pour le rendre plus facile de remarquer le bon rembourrage)

L'astuce consiste à envelopper l'entrée avec deux divs, l'extérieur a un 3px marge (ce qui les rend 3px plus petit que le td), l'intérieur possède un 3px rembourrage. Cela rend l'entrée 6px plus petite que la td, qui est ce que vous vouliez commencer avec.

Je ne suis pas sûr que la mécanique de cela, mais il fonctionne.

Dans cet exemple simple, il fonctionne également avec un seul div avec la marge de droite 6. Toutefois, dans le cas de mon application web, seule la solution ci-dessus fonctionne.

<table style="background-color: blue; width: 100%;" cellpadding="0" cellspacing="0">
<tr>
    <td style="background-color: red;   padding: 3px;">
        <div style="margin-right: 6px;">
                <input type="text" style="width:100%;">
        </div>
    </td>
    <td style="background-color: purple;   padding: 3px;">
        <div style="margin-right: 6px;">
                <input type="text" style="width:100%;">
        </div>
    </td>
    <td style="background-color: green;   padding: 3px;">
        <div style="margin-right: 6px;">
                <input type="text" style="width:100%;">
        </div>
    </td>
</tr>
</table>

Answer 4

Le problème a été expliqué précédemment, donc je ne réitère: largeur de ne pas tenir compte des frontières et de rembourrage. Une réponse possible à ce qui n'est pas discutée, mais que j'ai trouvé m'a aidé un groupe est d'envelopper vos entrées. Voici le code, et je vais vous expliquer comment cela permet dans un deuxième:

<table>
  <tr>
    <td><div style="overflow:hidden"><input style="width:100%" type="text" name="name" value="hello world" /></div></td>
  </tr>
</table>

La DIV habillage de l'ENTRÉE n'a pas de rembourrage ni-t-elle une frontière. C'est la solution. Un DIV étendra à son conteneur de la taille, mais aussi le respect des frontières et de rembourrage. Maintenant, l'ENTRÉE n'ai pas de problème de s'étendre à la taille de son conteneur, car il est à la frontière de moins en moins et pad-moins. Notez également que la DIV a son dépassement de la valeur hidden. Il semble que par défaut, les éléments peuvent se trouver en dehors de leur conteneur avec la valeur par défaut de débordement de visible. Ce s'assure juste que l'entrée reste à l'intérieur de son récipient et ne pas essayer de pousser à travers.

J'ai testé cela en Chrome et en Renard de Feu. Les deux semblent à l'égard de cette solution.

Answer 5

Le problème est dû à l'élément d'entrée du modèle de boîte. Récemment, j'ai trouvé une belle solution à la question en essayant de garder mon entrée à 100% pour les appareils mobiles.

Enveloppez votre entrée avec un autre élément, un div par exemple. Puis appliquer le style que vous voulez pour votre contribution pour que le wrapper div. Par exemple:

<div class="input-wrapper">
 <input type="text" />
</div>

.input-wrapper {
    border-raius:5px;
    padding:10px;
}
.input-wrapper input[type=text] {
    width:100%;
    font-size:16px;
}

De donner .entrée-wrapper coins arrondis rembourrage etc, tout ce que vous voulez pour votre entrée, puis donner la largeur d'entrée de 100%. Vous avez votre entrée collier joliment avec une bordure, etc, mais sans le désagrément de débordement!