Problème avec la taille d'un INPUT

**leSeb** · 30/01/2013, 18h14

Bonjour,

Je débute en CSS. J'aimerais qu'un champ INPUT prenne toute la largeur d'une cellule TD

Pour cela j'ai défini le code CSS suivant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
input
{
   width: 100%;
}

Le problème est que lors du rendu (Internet Explorer, Opéra, ...) le champ INPUT est légèrement plus grand que la cellule TD.

Comment faire pour résoudre ce problème (le problème existe également avec le champ TEXTAREA.

Je remercie par avance de votre aide.

**Torgar** · 30/01/2013, 18h24

Salut,

Mettre 99%

Tu dois avoir un padding sur ta cellule ce qui fait qu'elle déborde.

**leSeb** · 30/01/2013, 19h09

Merci pour ta réponse.

Je n'ai pas de padding sur ma cellule (j'ai tout forcé à 0px)

J'ai bien pensé à cette solution mais elle ne me convient pas vraiment !!

En effet, le but de mon 100% est d'aligner tous les éléments à gauche et à droite dans mon tableau. Et si je mets 99% pour l'INPUT et 100% pour les DIV alors, plus la page grandit et moins les éléments sont alignés à droite.

Je ne comprend pas pourquoi le 100% sur un DIV n'est pas égal à un 100% sur un INPUT ou un TEXTAREA puisque la taille censée être prise en compte est celle du parent donc celle de ma cellule ?

Pourquoi ce comportement étrange ?

**NoSmoking** · 30/01/2013, 19h40

Bonjour,
il te faut mettre le padding et le margin de l'INPUT à 0 en même temps qu'une largeur à 100%

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
input{
  width:100%;
  margin:0;
  padding:0;
}

et avec un border:none tu occuperas toute la largeur.

**leSeb** · 30/01/2013, 20h19

J'ai essayé et ça ne marche toujours pas !!
Pour simplifier le problème j'ai réduit le code au maximum afin de comprendre d'où le problème peut venir. J'en suis arrivé à ce code suivant :

HTML :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
<head>
    <link href="style.css" rel="stylesheet" type="text/css" />       
    <title>Page test</title>
</head>
<body>
    <section>
		<article>
			<ul>
				<li><input name="LanguesId" type="checkbox" value="4" />Allemand</li>
				<li><input name="LanguesId" type="checkbox" value="2" />Anglais</li>
				<li><input name="LanguesId" type="checkbox" value="7" />Arabe</li>
				<li><input name="LanguesId" type="checkbox" value="3" />Espagnol</li>
			</ul>
			<div>
				Mon contenu
			</div>
			<input type="text" />
		</article>
    </section>
</body>
</html>

CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
article
{
    margin: 0px auto;
    width: 20%;
}
 
ul
{
    background-color: White;
    border: 1px solid #abadb3;
    height: 100px;
    margin: 0px;
    overflow: auto;
    padding: 0px;
    width: 100%;
}
 
li
{
    display: block;
    margin: 0px;
    padding: 0px;
    list-style-type: none;
}
 
input[type=text]
{
    margin: 0px;
    padding: 0px;
    width: 100%
}
 
div
{
    border: 1px solid #abadb3;
    height: 30px;
    width: 100%;
}

Et la taille 100% du champ INPUT est différent du 100% du UL et du 100% du DIV ??????

**raydenprod** · 05/02/2013, 16h32

en fait c'est dû au fait que tu mets ta div et ton ul à 100% et que tu leurs appliques une bordure. En effet, il applique la bordure en + du 100% ce qui veut dire que ton ul et ta div font 2 px de large de + que ce qu'elles devraient (bordure gauche + bordure droite)

il faut donc que tu réduises la largeur de ta div et de ton ul

Problème avec la taille d'un INPUT

CSS

Vue hybride

Discussions similaires

Partager

Partager