html元素的位置的CSS樣式

我有可滾動的div內，我有每個數據和複選框。在這裏我想讓我的複選框在一個路線，任何人都可以建議我如何做到這一點。html元素的位置的CSS樣式

<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>

問候，

拉吉

來源

2011-03-03 rajputhch

你想要的複選框來對齊文本的每一行？ – gmedina 2011-03-03 16:57:06

嘗試是這樣的（現場演示：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>

來源

2011-03-03 18:14:26 gmedina

檢查http://www.w3schools.com/css/tryit.asp?filename=trycss_display_inline

{display:inline}

UPDATE：

<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

來源

2011-03-03 16:53:15

@John：如果你看到上面的代碼，我想把複選框對齊放在固定的位置。 – rajputhch 2011-03-03 16:55:26

好的......上面的更新會將複選框「浮動」在可滾動div的右側。 – 2011-03-03 16:59:55

@John：我試過更新的代碼，仍然複選框沒有對齊。 – rajputhch 2011-03-03 17:02:20

嘗試把<input>標記之前您的標籤文字是這樣的：

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

這應該在IE修復浮動的問題。

來源

2011-03-03 17:32:40 Gareth

我試過了，它不工作。 – rajputhch 2011-03-03 17:58:21

html元素的位置的CSS樣式

回答

相關問題