Comment faire pour aligner du texte et des zones de texte à l'horizontale?
C'est ce que le code suivant produit. Quelqu'un pourrait-il svp m'aider à faire de la ligne de texte avec les zones de texte sur toutes les tailles d'écran? À l'origine, je voulais régler la hauteur de chaque texte en ligne avec les zones de texte, mais a ensuite réalisé qu'il ne serait pas aligné sur différentes tailles d'écrans. Toute aide est appréciée.
<body>
<h1>Contact Us</h1>
<p>Please take a few moments to fill out our feedback form. It will help us to better address your needs. Thank you.</p>
<div id="mainLeft">
<table border="0" style="z-index: 1; position: inline; width: 440px; height: 334px; left: 0px; top: 0px;" width="644">
<tbody>
<tr>
<td height="40" scope="col" width="144"><strong><span class="style4"><span class="style5">Your Name:</span> </span></strong></td>
<td height="269" rowspan="10" scope="col" width="267">
<form action="send-form.php" id="form" method="post" name="form">
<p><input id="name" name="name" size="35" type="text" value="" /> </p>
<p><input id="email" maxlength="55" name="email" size="35" type="text" /></p>
<p><input id="address" maxlength="55" name="address" size="35" type="text" /></p>
<p><input id="city" maxlength="55" name="city" size="35" type="text" /></p>
<p><input id="state" maxlength="55" name="state" size="15" type="text" /></p>
<p><input id="zip" maxlength="55" name="zip" size="25" type="text" /></p>
<p><input id="telephone" maxlength="55" name="telephone" size="35" type="text" /></p>
<p><input id="fax" maxlength="55" name="fax" size="35" type="text" /></p>
<p><input id="feedback" maxlength="55" name="feedback" size="35" type="text" /></p>
<p><textarea cols="30" id="comments" name="comments" rows="7" wrap="virtual"></textarea></p>
<input name="Submit" onclick="MM_validateForm('email','','RisEmail','phone','','NisNum','comments','','R');return document.MM_returnValue" tabindex="1" type="submit" value="Submit" /> </form>
</td>
</tr>
<tr>
<td height="0" scope="col"><strong><span class="style6">Email Address: </span><br /></strong></td>
</tr>
<tr>
<td height="0" scope="col"><strong><span class="style6">Mailing Address: </span><br /></strong></td>
</tr>
<tr>
<td height="0" scope="col"><strong><span class="style6">City: </span></strong></td>
</tr>
<tr>
<td height="0" scope="col"><strong><span class="style6">State: </span></strong></td>
</tr>
<tr>
<td height="0" scope="col"><strong><span class="style6">Zip Code: </span></strong></td>
</tr>
<tr>
<td height="0" scope="col"><strong><span class="style6">Telephone: </span></strong></td>
</tr>
<tr>
<td height="0"scope="col"><strong><span class="style6">Fax: </span></strong></td>
</tr>
<tr>
<td height="0" scope="col"><strong><span class="style6">How did you hear about us?: </span></strong></td>
</tr>
<td scope="col"><span class="style6"><strong>Explanation of your legal situation: </strong></span><strong><span class="style4"> </span></strong></td>
</tr>
<tr>
<td align="right"> </td>
<td align="right" height="35"> </td>
<td align="left" height="35"> </td>
</tr>
</tbody>
</table>
</div>
</body>
table
s sont pour les données tabulaires sous forme, pas les formes.- Placer le texte d'étiquette et le texte/champ de type textarea dans le même TD ou de l'élément DIV.
Vous devez vous connecter pour publier un commentaire.
Vous n'avez pas besoin de tables ici, mais vous pouvez jeter un oeil à l'exemple ci-dessous comment faire ceci:
Bonne façon de le faire est:
Prendre une recherche/lire un peu de CSS tutoriel pour formater correctement votre code html.
Espérons que cette aide! 🙂
Ne pas utiliser des tableaux pour que les... utiliser quelque chose d'aussi simple que:
etc...
Vous pourriez même pas besoin de les sauts de ligne (
<br />
s) si vous le style tout correctement avec les CSS.Essayez d'utiliser une étiquette avec le
for
attribut.Cet exemple, serait en fait une étiquette à côté de votre champ de texte.
Vous n'avez pas besoin de la table ici.
Tout le monde va noix de voir les tables pour un formulaire, mais vous avez oublié de répondre à votre question: Une propriété css appelé
vertical-align
peut être joué un peu avec pour tout aligné. Dans mon exemple, je l'ai fixé à 'haut'. Mais vous pouvez utiliser des pixels (valeurs positives et négatives) pour modifier l'alignement ainsi. e.gvertical-align: 1px;
ouvertical-align:-1px;
De toute façon, Vous ne devriez pas utiliser des tableaux pour cela (surtout la façon dont vous les utilisez). Vous pouvez réaliser la même chose, tout simplement, à l'aide de la vrd/enjambe/etc:
HTML (extrait de l'aide de votre code)
CSS de style ci-dessus
Aperçu: http://jsfiddle.net/JESqY/5/