Aligner les sélectionner et d'entrée
Est possible d'aligner SÉLECTIONNER et d'ENTRÉE inline sans spécifier la LARGEUR taille, sans l'aide de tableaux et avec le HTML? Voir l'image.
Live exemple: http://jsfiddle.net/N4hpQ/
Merci.
<html>
<head>
<style>
fieldset {
display: inline-block;
}
fieldset input,
fieldset select{
float: right;
margin-left: 5px;
}
fieldset p {
text-align: right;
}
</style>
</head>
<body>
<fieldset>
<p><label>First Name: </label><input type="text" /></p>
<p><label>Second Name: </label><input type="text" /></p>
<p><label>Country: </label><select><option>Choose</option></select></p>
<p><label>Age: </label><select><option>Choose</option></select></p>
</fieldset>
</body>
</html>
Je crois que c'est l'un des très, très rarement le cas, je choisirais une
Pas de largeur? Je ne peux pas penser à un moyen, sauf à l'aide d'un tableau comme Zeta mentionné. Si avec la largeur, vous pouvez flotter l'étiquette et d'entrée/sélectionner pour la gauche, puis appliquer "display: inline-block; text-align: right; width: 175px;" (ou quelle que soit la largeur dont vous avez besoin) pour les éléments de l'étiquette.
Je donne ici: jsfiddle.net/oceog/N4hpQ/10, vous ne savez pas si il fonctionne sur n'importe quel navigateur différent de chrome
Pas de largeur, le texte de l'ÉTIQUETTE est variable par le codage. La capture n'est qu'un exemple.
Est possible d'aligner à gauche le fieldset?
<table>
si aucune width
est autorisé. Au moins, il est sémantiquement plus correct que <p>
. Notez que vous êtes actuellement absent de la for=
attribut dans votre code HTML. Vous pouvez inclure le droit <input>
/<select>
dans l'étiquette elle-même ou vous devez ajouter l'attribut.Pas de largeur? Je ne peux pas penser à un moyen, sauf à l'aide d'un tableau comme Zeta mentionné. Si avec la largeur, vous pouvez flotter l'étiquette et d'entrée/sélectionner pour la gauche, puis appliquer "display: inline-block; text-align: right; width: 175px;" (ou quelle que soit la largeur dont vous avez besoin) pour les éléments de l'étiquette.
Je donne ici: jsfiddle.net/oceog/N4hpQ/10, vous ne savez pas si il fonctionne sur n'importe quel navigateur différent de chrome
Pas de largeur, le texte de l'ÉTIQUETTE est variable par le codage. La capture n'est qu'un exemple.
Est possible d'aligner à gauche le fieldset?
OriginalL'auteur FeKuLa | 2012-12-06
Vous devez vous connecter pour publier un commentaire.
Vous pouvez utiliser css
display: table;
pour atteindre cet objectif.HTML
CSS
Démo
OriginalL'auteur 3dgoo
Sans
TABLE
ouwidth
.CSS:
Et HTML:
Et la violon
MODIFIER
Il semble que vous avez édité votre question. Si le même code HTML (comme dans votre exemple) est nécessaire, ma réponse n'est plus valable.
Je pense que vous pouvez utiliser le CSS de eicto le violon. Il utilise unité relative (
%
) pour la largeur, donc il n'a qu'une influence à l'intérieur de lafieldset
, et vous pouvez utiliser n'importe quel texte de l'étiquette que vous voulez.Oui, C'est le meilleur exemple, mais je ne peux pas aligner à gauche le FIELDSET...
OriginalL'auteur Teemu
Possible? Oui, voici un petit hack pour faire de même:
flotter vos étiquettes de gauche, flotter vos entrées à droite, puis donner les entrées d'une marge à droite, pour les mettre en position d'être à côté de vos étiquettes.
donc ressembler à ceci:
ici est la jsfiddle.
Je pense que vous devez repenser votre code,
p
éléments ne peut pas être découpée en deux parties distinctes, avec juste un peu de CSS. Le violon semble compliqué dans Win7 et FF.Oui, il y a un problème dans le JSFiddle exemple.
mise à jour jsfiddle, @Marvo et Teemu et Fekula, je suis sur Linux, donc je ne peux pas tester sous IE, mais je l'ai regardé dans google chrome et FF.
Difficile à expliquer dans un commentaire, mais en Mac/Chrome, le champ Nom est à l'horizontale, avec le Pays: l'étiquette, et le Nom: étiquette est curieusement en retrait. =/
OriginalL'auteur Ryan