Soulignement HTML simplifié

Question

Je crée un formulaire en HTML qui sera imprimé, avec des champs qui doivent être écrits par le destinataire. Fondamentalement, ce que je veux, c'est une seule ligne qui s'étend de la fin de l'étiquette du champ sur le côté de la page. Voilà comment je le fais en ce moment:

<table width="100%"> 
    <tr> 
     <td width="1%"> 
      Label: 
     </td> 
     <td style="border-bottom-style:solid; border-bottom-width:1px;"> 
      &nbsp; 
     </td> 
    </tr> 
</table> 

Cela fonctionne, mais il doit y avoir un moyen plus facile de le faire sans avoir besoin d'un élément de table ensemble. Des idées?

Answer 1

Je pense que votre solution est meilleure que les réponses jusqu'à présent. La seule chose que je changerais à propos de votre solution est que j'utiliserais une classe css au lieu d'inline.

Votre solution aura un meilleur alignement que l'utilisation des travées. Votre code sera plus propre avec des éléments de table qu'avec des travées.

En outre, vous pouvez envisager d'insérer une zone de texte dans votre cellule afin que vos utilisateurs puissent saisir les informations directement sur la page avant de les imprimer.

Answer 2

Comment utiliser l'étiquette d'étendue?

<span style="border-bottom....">Text</span> 

Answer 3

Voici mon CSS:

span.print_underline 
{ 
    display: inline-block; 
    height: 1em; 
    border-bottom: 1px solid #000; 
} 

donc votre code HTML ressemblera:

<span class="print_underline" style="width: 200px">&nbsp;</span> 

Je suis parti de la largeur, donc je pourrais réutiliser autant que je veux, mais vous pouvez spécifier la largeur.

En tant que sidenote, j'ai testé le même concept avec une balise div au lieu d'une balise span, et cela n'a pas fonctionné dans certaines situations. C'est probablement parce qu'il est sémantiquement incorrect de placer une div dans une balise de paragraphe (c'est pourquoi j'ai utilisé un span), et j'utilise généralement des balises de paragraphe au lieu d'utiliser les lignes de table comme vous avez utilisé.

Answer 4

juste avoir un div avec une marge appropriée à gauche. Les éléments de bloc par défaut s'étendent toujours sur toute la largeur.

Signification:

 

label { 
    float: left; 
} 

div { 
    margin-left: 10em; 
    border-bottom: 1px solid black; 
    height: 1em; 
} 

<label>label:</label>

<div></div>

il ne sera pas étirer la pleine largeur entre l'étiquette et le côté droit, mais vous pouvez l'étiquette cacher la bordure inférieure (en utilisant background-color ou quelque chose) et que le div se dilate tout le chemin vers la droite ainsi (sans la marge).

Si vous voulez une sémantique correcte, vous pouvez même utiliser une entrée au lieu d'une div, régler son affichage sur "bloquer" et corriger les bordures et l'arrière-plan.