Bonjour,

J'essaye de créer un champ input personnalisé dont voici le code :
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
.customInput {
	display: inline;
}
 
.customInput .left {
	float: left;
	background: url(ileft.png) top left no-repeat;
	height: 23px;
	width: 6px;
}
 
.customInput .right {
	float: left;
	background: url(iright.png) top right no-repeat;
	height: 23px;
	width: 6px;
}
 
.customInput input {
	display: block;
	float: left;
	background: url(icenter.png) top left repeat-x;
	border: none;
	height: 23px;
	font-size: 12px;
	color: #FFFFFF;
	padding-top: 3px;
}
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
	Nom :
	<div class="customInput">
		<div class="left">&nbsp;</div>
		<input type="text" name="name" value="azerty" size="5" />
		<div class="right">&nbsp;</div>
	</div>
 
	<div class="customInput">
		<div class="left">&nbsp;</div>
		<input type="text" name="name" value="azerty" size="5" />
		<div class="right">&nbsp;</div>
	</div>
Mon problème est que le div principal ne se comporte pas comme un élément inline. En l'occurence il se place en-dessous de "Nom :" au lieu d'être à côté. Si j'en mets deux de suite ils sont l'un à côté de l'autre.
J'imagine que cela a un rapport avec les float, mais si j'ai bien compris un élément ne flotte que dans son conteneur normalement?