Float et input personnalisé
Bonjour,
J'essaye de créer un champ input personnalisé dont voici le code :
Code:
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:
1
2
3
4
5
6
7
8
9
10
11
12
| Nom :
<div class="customInput">
<div class="left"> </div>
<input type="text" name="name" value="azerty" size="5" />
<div class="right"> </div>
</div>
<div class="customInput">
<div class="left"> </div>
<input type="text" name="name" value="azerty" size="5" />
<div class="right"> </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?
