CSS對齊標籤+字段+文本

試圖創建一個沒有表格的表格有幾個問題。任何幫助，將不勝感激。CSS對齊標籤+字段+文本

有人可以告訴我怎麼去這個
http://bit.ly/Y7q7Hu

代碼：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8" /> 
    <title></title> 
<style> 


.myfields label, .myfields input{ 
    display:inline-block; 
} 

.myfields label { 
    width:200px; 
    vertical-align: top; 
} 
</style> 

</head> 
<body> 
<form> 
<fieldset class="myfields"> 
       <div> 
        <label>Label 1<font color="red">*</font>:</label> 
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius elit eu metus malesuada malesuada. Praesent varius velit a libero varius congue. Donec fringilla nulla id sapien accumsan tincidunt in vel orci. Nam malesuada risus et mauris hendrerit tempus. Sed tincidunt fermentum tortor eget auctor. Donec at mauris non mi lobortis mollis. Vestibulum vitae enim massa, et rutrum ligula. Aliquam tempor rhoncus enim vitae porttitor. 
        <input id="agreement" type="checkbox">Accept 
       </div> 

      </fieldset> 
     </form> 
</body> 
</html>

感謝

來源

2013-04-25 Lacer

字體標籤已經過時了。我會用class =「required」的span元素來代替。並在輸入字段中爲您的標籤設置「for」和相應的ID – 2013-04-25 20:42:06

我會改變你的div是奠定出路：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8" /> 
    <title></title> 
<style> 
fieldset{border:none;} 

.myfields label, .myfields input{ 
    display:inline-block; 
} 

.myfields label { 
    width:200px; 
    vertical-align: top; 
} 
</style> 

</head> 
<body> 
<form> 
<fieldset class="myfields"> 
       <div style="float:left;height:300px;width:100px;"> 
        <label style="float:left;">Label 1<font color="red">*</font>:</label> 
       </div> 
        <div style="width:300px;"> 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius elit eu metus malesuada malesuada. Praesent varius velit a libero varius congue. Donec fringilla nulla id sapien accumsan tincidunt in vel orci. Nam malesuada risus et mauris hendrerit tempus. Sed tincidunt fermentum tortor eget auctor. Donec at mauris non mi lobortis mollis. Vestibulum vitae enim massa, et rutrum ligula. Aliquam tempor rhoncus enim vitae porttitor. 

         <div><input id="agreement" type="checkbox">Accept</div> 
        </div> 
      </fieldset> 
     </form> 
</body>

來源

2013-04-25 20:49:36

嘗試使用了float:left;該標籤和正確內容的嵌套部門將是float:right;。你基本上需要一個左右分割。

看看這個fiddle。

來源

2013-04-25 20:31:15

CSS對齊標籤+字段+文本

回答

相關問題