CSS - Formater des formulaires avec des étiquettes d'étiquettes

J'ai un formulaire que j'essaie de mettre en forme sémantiquement et de le mettre en forme avec CSS. Comme il est produit dynamiquement (à partir de ASP.NET MVC), certains éléments peuvent être rendus en texte plutôt qu'en entrée car ils peuvent être en lecture seule pour cet écran. J'essaye d'ajouter une largeur aux étiquettes d'étiquette pour rogner le formulaire et aligner les valeurs/boîtes de valeur, mais il semble que je peux seulement faire ceci si je les flotte (est-ce exact?). Cela fonctionne bien quand j'ai rendu des valeurs après la balise label, mais si la valeur est vide, le flottant gauche semble s'empiler contre l'étiquette précédente, même si les deux sont contenus dans les balises p (oui, oui?). Qu'est-ce que je fais de mal, le cas échéant?CSS - Formater des formulaires avec des étiquettes d'étiquettes

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head><meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" /><title> 

    Edit 

</title> 
     <!-- Next Style Section Is Just To Set Up Classes, it will be moved to .CSS file --> 
     <style type="text/css"> 
      div.FieldGroup {background-color: Blue; } 
      p.Field { display: block; } 
      span.NoteHeader { font-style: italic;} 
      label { float: left; width: 150px;} 
     </style> 
</head> 

<body> 
    <div id="main"> 


    <h2>Edit</h2> 



    <form action="" method="post"> 
     <div id="MainSection" class="FieldGroup"> 
      <fieldset> 
       <legend>Person Identification</legend> 
       <p class="Field"> 
        <label>Name:</label> 
        Name 
       </p> 
       <p class="Field"> 
        <label for="Colour">ChildStatus:</label> 
        <select id="Colour" name="Colour"> 
         <option value="10">Red</option> 
         <option value="20">Yellow</option> 
         <option selected="selected" value="30">Orange</option> 
        </select> 
       </p> 
       <p class="Field"> 
        <label for="Age">Age:</label> 
        <input id="Age" name="Age" type="text" value="" /> 

       </p> 
       <p class="Field"> 
        <label>Birthplace:</label> 
       </p> 
       <p class="Field"> 
        <label for="Reference">Reference:</label> 
        <input id="Reference" name="Reference" type="text" value="" /> 
       </p> 
      </fieldset> 
     </div> 
    </form> 
    </div> 

</body> 
</html>

Vive

(PS - Je ne peux pas ajouter en lecture seule pour contenir ces zones de texte blancs comme ils veulent le texte brut si elles ne peuvent pas changer la valeur)

Source

2009-08-21 Mad Halfling

Quelle est la raison pour laquelle vous enveloppez vos étiquettes/entrées dans les éléments de paragraphe? Cela peut fonctionner correctement, mais sémantiquement ne devraient-ils pas être divs? Peut-être que c'est trop réfléchir de ma part, mais une chose que je peux penser est que vous allez vouloir définir explicitement beaucoup de valeurs de style ennuyeuses dans le style p.Field car les navigateurs ajoutent des choses différentes aux tags p (marges et padding en particulier) et rarement un navigateur est le même sur ce point. Au moins avec un div, vous savez que la plupart des navigateurs devraient le traiter comme un conteneur avec tous les styles par défaut à 0 ou vide. –

J'ai changé cela pour l'essayer, mais cela ne change rien au problème. –

Ajouter clear: both votre déclaration de p.Field:

p.Field { 
    display: block; 
    clear: both; 
}

Source

2009-08-21 17:59:24 Pat

merci, quelqu'un d'autre sur une autre forme suggéré clair: à gauche et cela semble suffire. –

J'ai changé le ps en divs, cela fonctionnait beaucoup mieux (les ps étaient les valeurs par défaut de VS) –

Ajoutez une propriété clear: left au css de l'étiquette.

Source

2009-08-21 16:47:54 MyItchyChin

cela ne fonctionne pas, cela signifie que la zone de saisie suivante se déplace jusqu'à la fin de la ligne précédente –

Vous n'avez pas besoin de flotter vos label s afin de définir leur largeur, il vous suffit de changer leur display-block. Si vous les faites flotter, leurs blocs contenant p ne seront pas étendus pour les entourer à moins d'avoir un overflow de hidden ou auto. Effacer le label peut également fonctionner pour les empêcher de s'empiler, mais tout dépend de l'apparence que vous voulez.

Source

2009-08-25 05:53:58

CSS - Formater des formulaires avec des étiquettes d'étiquettes

Répondre

Questions connexes