Question

如何修复此浮动问题？在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;  
}

Answer 1

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

如何解决这个浮动？

1 个答案: