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

ユーザーエージェントスタイルには通常、ulそれらを削除するだけでパディングとマージンがあります

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

また、ラップliするよりも幅が広いのでul、それぞれに1pxのmaginを追加してli、1x6=6の余分なピクセルを追加します。

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

于 2012-07-09T22:26:42.470 に答える
1

ulには40pxのパディングがあります-デフォルトでは左、パディングを設定：0; 水平位置を固定します。

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

#navigation_horiz ul liと#navigation_horizmargin:0 ulに ( の代わりにmargin: 0 1px 0 0)適用します (CSS リセットを使用していないと仮定して、ul にも追加します)。padding:0

ここ: jsFiddlyFooFoo

于 2012-07-09T22:12:28.490 に答える