css - DIV 内没有填充问题

Question

<div id="navMenu">
    <div id="navigation_horiz">
        <ul>
            <li>
                <a href="" class="navlink">Find a Doctor</a>
            </li>
            <li>
                <a href="" class="navlink">Why Interfaith</a>
                <div class="dropdown" id="dropdown_one">
                    <div class="test" style="padding: 10px;">History & Mission</div>
                    <div class="test" style="padding: 10px;">Executive Director</div>
                    <div class="test" style="padding: 10px;">Career Opportunities</div>
                    <div class="test" style="padding: 10px;">News & Events</div>
                </div>
                <!-- .dropdown_menu -->
            </li>
            <li>
                <a href="" class="navlink">Medical Services</a>
                <div class="dropdown" id="dropdown_one">
                    <div class="test" style="padding: 10px;">
                        <a href="#">Behavioral Health</a>
                    </div>
                    <div class="test" style="padding: 10px;">Clinical Laboratory</div>
                    <div class="test" style="padding: 10px;">Dentistry</div>
                    <div class="test" style="padding: 10px;">Emergency</div>
                    <div class="test" style="padding: 10px;">Gynecology</div>
                    <div class="test" style="padding: 10px;">Medicine</div>
                    <div class="test" style="padding: 10px;">Pastoral</div>
                    <div class="test" style="padding: 10px;">Pediatrics</div>
                    <div class="test" style="padding: 10px;">Physical Medicine & Rehab</div>
                    <div class="test" style="padding: 10px;">Radiology</div>
                    <div class="test" style="padding: 10px;">Surgery</div>
                    <div class="test" style="padding: 10px;">Other Services</div>
                </div>
                <!-- .dropdown_menu -->
            </li>
            <li>
                <a href="" class="navlink">Medical Trainings</a>
                <div class="dropdown" id="dropdown_one">
                    <div class="test" style="padding: 10px;">Medical Training</div>
                    <div class="test" style="padding: 10px;">Behavioral Health</div>
                    <div class="test" style="padding: 10px;">Predoctoral Externship</div>
                    <div class="test" style="padding: 10px;">Podiatric Residency</div>
                    <div class="test" style="padding: 10px;">Dental Residency</div>
                    <div class="test" style="padding: 10px;">Pulmonary Residency</div>
                </div>
                <!-- .dropdown_menu -->
            </li>
            <li>
                <a href="" class="navlink">For Patients & Visitors</a>
                <div class="dropdown" id="dropdown_three">
                    <p>
                        <a href="#">This is a Link</a>
                    </p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin blandit
                        sodales justo, id fringilla eros dapibus vitae. Morbi molestie enim diam,
                        a vulputate neque. Morbi sit amet nunc id quam mollis aliquet. Donec sed
                        massa justo, ut congue enim. Praesent lobortis viverra dolor commodo euismod.</p>
                </div>
                <!-- .dropdown_menu -->
            </li>
            <li>
                <a href="" class="navlink">Contact Us</a>
            </li>
        </ul>
    </div>
    <!-- #navigation_horiz -->
</div>
<!-- END NAVIGATION -->

我有以下 CSS:

#navMenu { 
    width: 960px;
    height: 50px;
    border: 1px solid black;
}

    /* * {margin:0; padding:0; font-family:Arial, Helvetica, sans-serif; font-size:11px; font-weight:bold; line-height:16px} */
    .container {margin:0px auto; width:960px; background:#fff; padding:0px;}

    /* ----------------------------------------------------- */
    /* navigation styles - BEGIN */ 

    /* style for horizontal nav */  
    #navigation_horiz {width:960px; clear:both; padding:0 0 0 0; margin:0 auto}
    #navigation_horiz  ul {height:40px; display:block}
    #navigation_horiz  ul li {display:block; float:left; width:160px; height:40px; background:#999; margin:0 1px 0 0; position:relative}
    #navigation_horiz  ul li a.navlink {display:block; width:160px; height:35px; padding: 12px 0 0 0; text-align:center; color:#fff; text-decoration:none}
    #navigation_horiz .dropdown {position:absolute; padding:5px 10px 5px 10px; border-bottom-right-radius:10px; border-bottom-left-radius:10px; -moz-border-radius-bottomright:10px; -moz-border-radius-bottomleft:10px}

        /* style for each drop down - horizontal */
        #navigation_horiz ul li #dropdown_one {background:#ccc; color:#fff}
        #navigation_horiz ul li #dropdown_one a {color:red}
        #navigation_horiz ul li #dropdown_two {background:#ccc; color:#fff}
        #navigation_horiz ul li #dropdown_two a {color:black}
        #navigation_horiz ul li #dropdown_three {background:#ccc; color:#fff}   
        #navigation_horiz ul li #dropdown_three a {color:gray}

出于某种原因，UL 列表位于中心，而不是从 DIV 的左侧开始并一直延伸到右侧。你可以在这里看到它的样子:http://i46.tinypic.com/2wnz7g1.gif

有什么想法吗？谢谢

Answer 1

ul 默认有 40px padding-left，设置 padding: 0;它将固定水平位置。

ul { padding: 0; }