如何解决这个浮点数？

如何解决这个浮动问题？旁边Hobbies标签？如何解决这个浮点数？

enter image description here

这里是我的代码：

<!doctype html> 
<html> 
    <head> 
     <title>Enter Your Data</title> 
     <link rel="stylesheet" href="style.css"/> 
     <script type="text/javascript" src="script.js"></script> 
    </head> 

    <body> 
     <div id="mainContainer"> 
      <header> 
       <h1>Enter your data :</h1> 
      </header> 

      <form name="contactForm" id="contactForm"> 
       <div id="textInfo"> 
        <ul>  
         <li>    
          <label for="firstName">First Name : </label> 
          <input type="text" name="firstName" id="firstName"></input><br> 
         </li> 
         <li>  
          <label for="lastName">Last Name : </label> 
          <input type="text" name="lastName" id="lastName"></input><br> 
         </li> 
         <li>  
          <label for="email">E-mail : </label> 
          <input type="email" name="email" id="email"></input><br> 
         </li>       
        </ul> 
       </div> 

      <!-- Occupation radio buttons --> 
       <div id="occupationInfo"> 
        <label>Occupation : </label> 
        <ul> 
         <li> 
          <input type="radio" name="occupation" value="student" id="student"> 
           <label for="student">Student</label> 
          </input> 
         </li> 
         <li>  
          <input type="radio" name="occupation" value="professor" id="professor"> 
           <label for="professor">Professor</label> 
          </input> 
         </li> 
         <li>  
          <input type="radio" name="occupation" value="programmer" id="programmer"> 
           <label for="programmer">Programmer</label> 
          </input> 
         </li> 
        </ul> 
       </div> 
      <!-- End of radio buttons --> 

      <!-- Hobbies checkboxes --> 
       <div id="hobbyInfo"> 
        <label>Hobbies : </label> 
        <ul> 
         <li> 
          <input type="checkbox" name="hobby" value="computer" id="computer"> 
           <label for="computer">Computer</label> 
          </input> 
         </li>  
         <li>  
          <input type="checkbox" name="hobby" value="biking" id="biking"> 
           <label for="biking">Biking</label> 
          </input> 
         </li>  
         <li>  
          <input type="checkbox" name="hobby" value="reading" id="reading"> 
           <label for="reading">Reading</label> 
          </input> 
         </li> 
        </ul> 
       </div> 
      <!-- End of hobbies section -->   

      <!-- Birthday section --> 
      <div id="birthdayInfo"> 
       <label>Enter your birhday date : </label> 
        <select name="month"> 
         <option value="1">January</option> 
         <option value="2">February</option> 
         <option value="3">March</option> 
         <option value="4">April</option> 
         <option value="5">May</option> 
         <option value="6">June</option> 
         <option value="7">July</option> 
         <option value="8">August</option> 
         <option value="9">September</option> 
         <option value="10">October</option> 
         <option value="11">November</option> 
         <option value="12">December</option> 
        </select> 
        <select name="day"> 
         <option value="1">1</option> 
         <option value="2">2</option> 
         <option value="3">3</option> 
         <option value="4">4</option> 
         <option value="5">5</option> 
         <option value="6">6</option> 
         <option value="7">7</option> 
         <option value="8">8</option> 
         <option value="9">9</option> 
         <option value="10">10</option> 
         <option value="11">11</option> 
         <option value="12">12</option> 
         <option value="13">13</option> 
         <option value="14">14</option> 
         <option value="15">15</option> 
         <option value="16">16</option> 
         <option value="17">17</option> 
         <option value="18">18</option> 
         <option value="19">19</option> 
         <option value="20">20</option> 
         <option value="21">21</option> 
         <option value="22">22</option> 
         <option value="23">23</option> 
         <option value="24">24</option> 
         <option value="25">25</option> 
         <option value="26">26</option> 
         <option value="27">27</option> 
         <option value="28">28</option> 
         <option value="29">29</option> 
         <option value="30">30</option> 
         <option value="31">31</option> 
        </select> 
        <select name="year"> 
         <option value="2002">2002</option> 
         <option value="2003">2003</option> 
         <option value="2004">2004</option> 
         <option value="2005">2005</option> 
        </select> 
       </div> 
      <!-- End of birthday section --> 
       <div id="briefInfo"> 
        <label for="brief">A little bit about you : </label> 
        <textarea id="brief"></textarea> 
       </div> 

       <input type="submit" value="Submit"/> 
      </form> 
     </div 
    </body> 

</html>

的style.css：

* { 
    padding : 0 ; 
    margin : 0; 
    font-size : 17px; 
} 

body { 
    width : 100%; 
    height : 100%; 
    background-color: #005F6B; 
} 

ul { 
     display :inline; 
} 

li { 
    list-style : none; 
    height : 30px; 
} 

#mainContainer { 
    width : 800px; 
    margin : auto; 
    box-shadow : 1px 1px 3px 0 #343838; 
    border-radius : 0px 10px; 
    background-color : #008C9E; 
} 

#mainContainer header { 
    color : #343838;  
} 

#mainContainer header h1 { 
    font-size : 30px; 
    padding: 15px; 
    text-shadow : 1px 1px #005F6B ; 
} 

#contactForm div { 
    width : 50%; 
    margin : 5px; 
    background-color : orange; 
} 


#textInfo li { 
    padding: 3px; 
} 

#textInfo label { 
    float :left; 
} 

#textInfo input { 
    float:right; 
    height : 20px; 
    width : 60%; 
} 

#occupationInfo li { 
    float : right; 
} 

#hobbyInfo li{ 
    float : right; 
}

来源

2012-08-13 Rafael Adel

添加clear:both您hobbyInfo股利。例如：http://jsfiddle.net/dLjge/（我通过div上的style =“...”添加了它）。

来源

2012-08-13 22:18:38

我也会推荐阅读[Float Containment]（http://colinaarts.com/articles/float-containment/）一个clearfix方法，它不需要'clear：both;'在相邻的同级元素上。 – thirdender 2012-08-13 22:24:13

感谢您的链接，我会阅读它。 – 2012-08-13 22:31:23

好文章，但我不是所提议的解决方案的粉丝。 'clear：both'将适用于所有浏览器，它很简单，而且相对容易理解。跳过IE6/7 hasLayout篮球，所以你可以使用HTML5属性似乎有点过分从实用性的角度来看。他还暗示我是小猫凶手。 – 2012-08-13 22:33:09

如何解决这个浮点数？

回答

相关问题