Styles CSS pour la position des éléments html

J'ai div divisible dans lequel j'ai des données et une case à cocher pour chacun.Voici je veux faire ma case à cocher dans un alignement, Quelqu'un peut-il me suggérer comment faire cela.Styles CSS pour la position des éléments html

<html> 
    <head> 
    </head> 
    <body> 
    <div style="border : solid 2px #ff0000; background : #000000; color : #ffffff; padding : 4px; width : 200px; height : 50px; overflow : auto; "> 
    test1 <input type="checkbox" name="test" value="ewew" style=" position: absolute; right: 0px; top: 0px; "/> <br /> 
    testing123<input type="checkbox" name="test" value="ewew" style=" position: absolute; right: 199px; top: 0px; "/><br /> 
    testing45678<input type="checkbox" name="test" value="ewew" style=" position: absolute; right: 199px; top: 0px; "/><br /> 
    </div> 
</html>

Cordialement,

Raj

Source

2011-03-03 rajputhch

vous voulez que les cases à cocher pour aligner à chaque ligne de texte? – gmedina

Essayez quelque chose comme ça (démonstration en direct: http://jsfiddle.net/gmedina/YBXrW/4/):

<form class="aForm"> 
    <label for="checkbox1"><input id="checkbox1" type="checkbox" />test1</label> 
    <label for="checkbox2"><input id="checkbox2" type="checkbox" />test2</label> 
    <label for="checkbox3"><input id="checkbox3" type="checkbox" />test3</label> 
</form> 
<style> 
.aForm { 
    border : solid 2px #ff0000; 
    background : #000000; 
    color : #ffffff; 
    padding : 4px; 
    width : 200px; 
    height : 50px; 
    overflow : auto; 
} 

.aForm label { 
    clear : right; 
    display : block; 
} 

.aForm label input[type=checkbox] { 
    float : right; 
} 
</style>

Source

2011-03-03 18:14:26 gmedina

Vérifier http://www.w3schools.com/css/tryit.asp?filename=trycss_display_inline

{display:inline}

MISE À JOUR:

<html> 
<head> 
</head> 
<body> 
<div style="border : solid 2px #ff0000; background : #000000; color : #ffffff; padding : 4px; width : 200px; height : 50px; overflow : auto; "> 
test1 <input type="checkbox" name="test" value="ewew" style="float: right"/> <br /> 
testing123<input type="checkbox" name="test" value="ewew" style="float: right "/><br /> 
testing45678<input type="checkbox" name="test" value="ewew" style="float: right "/><br /> 
</div>

enter image description here

Source

2011-03-03 16:53:15

@John: Si vous voyez le code ci-dessus, je veux placer l'alignement de la case à cocher dans un emplacement fixe. – rajputhch

Ok ... la mise à jour ci-dessus va "faire flotter" les cases à cocher à la droite de la div scrollable. –

@John: J'ai essayé le code mis à jour, les cases à cocher ne sont pas alignées. – rajputhch

Essayez de mettre l'étiquette <input> AVANT votre texte d'étiquette comme ceci:

<input type="checkbox" name="test" value="ewew" style="float: right"/>test1<br />

Cela devrait résoudre le problème du flotteur dans IE.

Source

2011-03-03 17:32:40 Gareth

J'ai essayé et ça ne fonctionne pas. – rajputhch

Styles CSS pour la position des éléments html

Répondre

Questions connexes