爲什麼我的兩列表格不能正確排列？

我正在學習一些CSS，並希望製作一個兩列形式，沒有任何表格標籤等。這就是我所得到的（來自CSS Cookbook 3ed版的代碼）。爲什麼我的兩列表格不能正確排列？

HTML代碼：

<div class="container"> 
     <form id="regform" name="regform" method="post" action="/regform.php"> 
      <div id="register"> 
       <h4>Register</h4> 
       <label for="fmlogin">Login</label> 
       <input type="text" name="fmlogin" id="fmlogin" /> 
       <label for="fmemail">Email Address</label> 
       <input type="text" name="fmemail" id="fmemail" /> 
       <label for="fmemail2">Confirm Address</label> 
       <input type="text" name="fmemail2" id="fmemail2" /> 
       <label for="fmpswd">Password</label> 
       <input type="password" name="fmpswd" id="fmpswd" /> 
       <label for="fmpswd2">Confirm Password</label> 
       <input type="password" name="fmpswd2" id="fmpswd2" /> 
      </div> 
      <div id="contactinfo"> 
       <h4>Contact Information</h4> 
       <label for="fmfname">First Name</label> 
       <input type="text" name="fmfname" id="fmfname" /> 
       <label for="fmlname">Last Name</label> 
       <input type="text" name="fmlname" id="fmlname" /> 
       <label for="fmaddy1">Address 1</label> 
       <input type="text" name="fmaddy1" id="fmaddy1" /> 
       <label for="fmaddy2">Address 2</label> 
       <input type="text" name="fmaddy2" id="fmaddy2" /> 
       <label for="fmcity">City</label> 
       <input type="text" name="fmcity" id="fmcity" /> 
       <label for="fmstate">State or Province</label> 
       <input type="text" name="fmstate" id="fmstate" /> 
       <label for="fmzip">Zip</label> 
       <input type="text" name="fmzip" id="fmzip" size="5" /> 
       <label for="fmcountry">Country</label> 
       <input type="text" name="fmcountry" id="fmcountry" /> 
       <input type="submit" name="submit" value="send" class="submit" /> 
      </div> 
     </form> 
    </div>

CSS代碼：

label { 
    margin-top: .33em; 
    display: block; 
} 

input { 
    display: block; 
    width: 250px; 
} 

#register { 
    float: left; 
} 

#contactinfo { 
    padding-left: 275px; 
}

來源

2013-12-15 XT_Nova

因爲你漂浮一個DIV，而不是其他。

通過一些簡單的CSS改變它會工作（只要h4不跨越多行）：

#register { 
    float: left; 
    width: 275px; 
} 

#contactinfo { 
    float: left; 
}

見updated fiddle。

來源

2013-12-15 13:34:54 Arjan

我這麼笨..謝謝！ :) –

這裏是如何我調試（除了我會使用螢火蟲或其他檢查/ devtools）：http://jsfiddle.net/PhilippeVay/yuxTA/2/

正如他的回答表示通過@Arjan，這是由於浮動及其影響。
取消對不會修改佈局的解決方案的最後一個CSS聲明。同時添加margin-top到兩列或padding-top如果你想要一個垂直邊距回來......

來源

2013-12-15 13:38:28 FelipeAls

另一種選擇是從h4（去掉利潤率雖然，在其他的答案說，浮動[或類似]兩列更有感）。

h4 {margin: 0;}

來源

2013-12-15 13:40:38

你要所有浮動股利在containter

#register { 
float: left;

}

#contactinfo { 
float:left; 
margin-left:30px; /*increase or decrease if you like*/ 
}

來源

2013-12-15 13:50:27 iamkarsoft

爲什麼我的兩列表格不能正確排列？

回答

相關問題