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的LEFT开始，一直向右延伸。你可以在这里看到它的样子：http://i46.tinypic.com/2wnz7g1.gif

有什么想法吗？感谢

Answer 1

将margin:0（而非margin: 0 1px 0 0）应用于 #navigation_horiz ul li 以及 #navigation_horiz ul （假设您未使用css reset;也可以将padding:0添加到ul。）

此处：jsFiddlyFooFoo

Answer 2

ul默认有40px padding-left，设置填充：0;它会固定水平位置。

ul { padding: 0; }

Answer 3

用户代理样式通常在ul上有填充和边距，只需删除它们

#navMenu ul{
    padding: 0;
    margin: 0;
}

同样，li占用的宽度超过ul，因此它会包含，您为每个li添加1px magin，因此1x6 = 6个额外像素

http://jsfiddle.net/EJttX/1/

DIV内部没有填充问题

3 个答案: