J'ai une page mobile comprenant un formulaire. J'ai besoin d'aligner le select et l'input/textarea et de leur donner la même taille mais cela ne fonctionne pas correctement. (voir image)
Comme vous pouvez le voir dans la capture d'écran, la liste déroulante n'a pas la même taille que la saisie ou le textarea. Voici mon code :
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN"
"http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en' xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
</head>
<style type="text/css">
select, input, textarea {
border: solid 0.1em black;
font: normal 1.5em Arial;
margin: 0.3em 0;
padding: 0.2em;
}
.em { width: 11em; }
.px { width: 150px; }
.percent { width: 50%; }
</style>
<select name="option1" class="em">
<option value="" selected="">= choose =</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input name="input" type="text" value="" class="em" />
<textarea class="em"></textarea>
<hr />
<select name="option1" class="px">
<option value="" selected="">= choose =</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input name="input" type="text" value="" class="px" />
<textarea class="px"></textarea>
<hr />
<select name="option1" class="percent">
<option value="" selected="">= choose =</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input name="input" type="text" value="" class="percent" />
<textarea class="percent"></textarea>
</body>
</html>Qu'est-ce que je fais de mal ou qu'est-ce que je devrais faire ?
