无序列表正在受到神秘格式的影响

我觉得我在这里失去了主意。我已经逐层剥离了css层到它的最小值，并且列表仍然显示为包装器左边填充了大约50个像素。我在这里使用了一些jQery，但我没有看到它会如何影响列表和关联的div放置。如果任何人都可以发现罪魁祸首，我会非常感激。我只在下面的代码中包含了一个列表项。他们都一样。无序列表正在受到神秘格式的影响

的页面是在这里：http://www.tpan.com/testing/custom.html

的JavaScript是在这里：

$(document).ready(function() { 
    function addDrop() { 
     $(this).addClass("hovering"); 
     $(this).siblings().fadeTo("fast", 0.3); 
     $(this).fadeTo("slow", 1.0); 
    }; 

    function removeDrop() { 
     $(this).removeClass("hovering"); 
     $(this).fadeTo("fast", 1.0); 
    }; 

    var dropConfig = { 
     interval: 500, 
     sensitivity: 4, 
     over: addDrop, 
     timeout: 500, 
     out: removeDrop, 
    }; 

    $("li.drop").hoverIntent(dropConfig); 
});

的CSS是在这里：

body { 
    margin:0px; 
} 
#wrapper { 
    width:1000px; 
    margin-right:auto; 
    margin-left:auto; 
    border:1px dotted #999; 
    height:800px; 
} 
#menu li { 
    display:inline; 
    border:1px solid #000; 
    padding-right:20px; 
    padding-left:20px; 
} 
#menu li a { 
    font-size:12px; 
    color:#666; 
    text-decoration:none; 
    font-weight:lighter; 
    font-family:arial; 
} 
#menu div { 
    display:none; 
} 
#menu li.drop div { 
    width:600px; 
    position:absolute; 
    background-color:#666; 
    left:auto; 
} 
#menu li.hovering div { 
    display:block; 
} 
#menu h2,ul#menu h3 { 
    font-size:12px; 
    font-weight:lighter; 
} 
#menu ul { 
    width:800px; 
    position: relative; 
}

的HTML是在这里：

<div id="wrapper"> 
    <div id="dropMenu"> 
     <ul id="menu"> 
      <li class="drop"> 
       <a class="droplink" href="#">Home</a> 
       <div class="dropContainer"> 
        <h3> 1 </h3> 
        <p> 
         <a href="#">Shirts</a>, <a href="#">T-shirts</a>, <a href="#">Accessories</a>, <a href="#">More...</a> 
        </p> 
        <h3> Gifts </h3> 
        <p> 
         <a href="#">Sporting goods</a>, <a href="#">Gadgets</a>, <a href="#">More...</a> 
        </p> 
        <h3> Clearance! </h3> 
        <p> 
         40% off all photo accessories this weekend only. <a href="#">Don't miss out!</a> 
        </p> 
        <a href="#" class="more"> More stuff for him...</a> 
       </div> 
      </li> 
     </ul> 
    </div> 
</div>

我已经花了几个小时来重复这个过程。再次感谢你。

来源

2011-12-30 syllables

不完全清楚你遇到的问题。 50px的填充物出现在哪里，你不指望在那里？ – kinakuta 2011-12-30 08:17:42

三网融合

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

的空间从每一个无序列表有默认的保证金来了。你需要删除它。

来源

2011-12-30 08:16:59 Scott

真相。如需进一步阅读，请访问http://meyerweb.com/eric/tools/css/reset/如果您必须跨浏览器部署一致的界面，它将使您的生活更美好。 – RSG 2011-12-30 08:23:14

就是这样。非常非常感谢你。 – syllables 2011-12-30 08:41:12

它可能是一个好主意，在着手任何代码和css之前使用CSS重置 - https://stackoverflow.com/questions/116754/best-css-reset。它看起来像我的主菜单“div”需要填充属性为0来移除左侧的40个像素。

来源

2011-12-30 08:27:18 Innate

你是对的。感谢您的时间。 – syllables 2011-12-30 08:41:30

无序列表正在受到神秘格式的影响

回答

相关问题