0 
<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

任何的想法？谢谢

4

3 回答 3

1

应用margin:0（而不是margin: 0 1px 0 0）到#navigation_horiz ul li以及#navigation_horiz ul（假设您没有使用 css 重置；也添加padding:0到 ul 中。）

这里：jsFiddlyFooFoo

于 2012-07-09T22:12:28.490 回答
1

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

ul { padding: 0; }
于 2012-07-09T22:17:41.290 回答
1

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

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

此外，您li占用的宽度比ul它包裹的宽度更大，您为每个添加 1px 大小，li因此 1x6=6 额外像素

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

于 2012-07-09T22:26:42.470 回答