Organiser les éléments fieldset comme une table classique-design

Je suis en train d'essayer d'arranger les titres pour 3 fieldset éléments de la même façon qu'une table classique qui ressemble, mais je ne peux pas le faire comme je le veux. C'est assez proche, mais...

<label style="vertical-align:top;">Title1</label>
<fieldset style="display:inline; border:none; padding:0px; margin:0px; vertical-align:middle;">
<input value="Lorem Ipsum" /><br />
<input value="Lorem Ipsum" /><br />
<input value="Lorem Ipsum" />
</fieldset>

<label style="vertical-align:top;">Title2</label>
<fieldset style="display:inline; border:none; padding:0px; margin:0px; vertical-align:middle;">
<input value="Lorem Ipsum" />
</fieldset>

<label style="vertical-align:top;">Title3</label>
<fieldset style="display:inline; border:none; padding:0px; margin:0px; vertical-align:middle;">
Lorem Ipsum
</fieldset>

J'ai peut-ai utilisé les tables s'il y avait une façon que je n'ai pas eu à exécuter une instruction si dans mon code PHP pour le titre et l'élément fieldset. De Plus, à l'aide de fieldset pour ce que je fais ici semble être une meilleure solution, en termes de jolies code.

Eu des suggestions pour quelque chose de semblable pour le code ci-dessus?
Précisions: http://anony.ws/di-FJKD.jpg

Qu'est-ce que ça fait de ne PAS faire ce que vous voulez qu'il fasse? Avez-vous comme une image ou un exemple de ce que vous voulez que le résultat final? J'aimerais vous aider mais je ne suis pas sûr de ce que vous êtes en train d'essayer de faire.
Il y a une image. Droit à la fin du post.
Comme je l'ai dit; c'est plus propre, et je n'aurai pas à exécuter une instruction if pour la même chose, deux fois. C'est redondant.
Les étiquettes sont pour les contrôles d'entrée. Utilisation legend au lieu de cela, et de les placer à l'intérieur de la fieldset.

OriginalL'auteur Nisto | 2011-06-04

  1. 2

    ce que vous pourriez faire est de retirer la label'partir de l'écoulement, de sorte qu'elles n'obtiennent pas aligné verticalement avec les entrées/texte.. ce faire, absolument positionnement eux.. cela nécessite un élément parent d'avoir position: relative; sur elle - je présume que l'ensemble du code ci-dessus est dans un form element mais pour l'amour d'une démo que j'ai juste enveloppé tout votre code dans un div.

    Exemple De Travail

    HTML:

    <div id="form"> 

  <label>Title1</label>
  <fieldset>
    <input value="Lorem Ipsum" /><br />
    <input value="Lorem Ipsum" /><br />
    <input value="Lorem Ipsum" />
  </fieldset>

  <label>Title2</label>
  <fieldset>
    <input value="Lorem Ipsum" />
  </fieldset>

  <label>Title3</label>
  <fieldset>
  Lorem Ipsum
  </fieldset>

</div>

    CSS:

    #form {
  position: relative; /* labels need this on the their parent element */
}

fieldset {
  margin: 0;
  padding: 0;
  border: 0;
  padding-top: 30px; /* leave a space to position for the labels */
}

fieldset {display: inline-block; vertical-align: middle;}
fieldset {display: inline !ie7; /* IE6/7 need display inline after the inline-block rule */}

label {
   position: absolute; 
   top: 5px; 
   left: auto; 
   margin-left: 5px; 
   font-weight: bold;
}

    ajouté par les commentaires

    car il n'y a pas assez de place dans les commentaires, voici le code que j'ai est une pensée qui n'a pas de position de la label, pour ce faire, les label aurait besoin d'aller à l'intérieur de l'alignés verticalement fieldset

    #form {
  position: relative; /* labels need this on the their parent element */
}

fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

fieldset {display: inline-block; vertical-align: middle; background: #eee;}
fieldset {display: inline !ie7;}


label {
   display: block;
   font-weight: bold;
}

    HTML:

    <fieldset>
  <label>Title1</label>
  <input value="Lorem Ipsum" /><br />
  <input value="Lorem Ipsum" /><br />
  <input value="Lorem Ipsum" />
</fieldset>


<fieldset>
  <label>Title2</label>
  <input value="Lorem Ipsum" />
</fieldset>


<fieldset>
  <label>Title3</label>
  Lorem Ipsum
</fieldset>
    +1 Mais inline-block n'est pas nécessaire. Inline fonctionne très bien, voir ce violon
    il ne s'agit donc pas de grâce!, donc, pas besoin de IE hack soit.. désolé, travaillait sur un autre manière de faire qui aurait signifié le code HTML d'être réécrit, oublié la modification de retour à l'essentiel - toutefois, si vous vouliez une largeur sur le fieldset inline-block serait peut-être la meilleure option..
    Il n'y a pas moyen que je peux aligner le texte au-dessus de la fieldset tags, sans l'aide d'un positionnement absolu? Je ne suis pas exactement à la recherche d'avoir une position exacte du texte; je veux juste le texte au-dessus de la fieldset éléments.
    vous pouvez déplacer les étiquettes à l'intérieur du jeu de champs, et de les rendre display:block; sans le positionnement et un rembourrage supplémentaire.
    Je suis en train display:block; pour <legend> mais il n'est pas vraiment comme prévu. Est-il quelque chose que je suis absent? J'ai enlevé le position:absolute; et padding:1.25em; codes.

    OriginalL'auteur clairesuzy