的DIV内部没有填充问题

<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：的DIV内部没有填充问题

#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

任何想法？感谢

来源

2012-07-09 Interfaith

ul有默认40px填充左侧，设置填充：0;它会修复水平位置。

ul { padding: 0; }

来源

2012-07-09 22:17:41 riku

应用（而不是margin: 0 1px 0 0）margin:0到#navigation_horiz UL李以及#navigation_horiz UL（假设你没有使用CSS复位;还加padding:0到UL以及）

这里：jsFiddlyFooFoo

来源

2012-07-09 22:12:28

我不知道如果另一个样式集causin g这个错误，因为当我单独使用它时，工作正常。请帮忙。谢谢 – Interfaith 2012-07-10 14:49:13

@Infafaith将'padding：0'应用于#navigation_horiz ul：] – 2012-07-10 14:52:08

Vinny您修复了它......并感谢您的帮助......所有人！ :) – Interfaith 2012-07-10 15:07:29

用户代理样式通常有ul填充和保证金只是删除它们

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

而且你li占用更多的宽度比ul所以包装，添加1px的magin每个li所以1X6 = 6个额外的像素

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

来源

2012-07-09 22:26:42 Musa

的DIV内部没有填充问题

回答

相关问题