CSS邊距和填充問題

Question

我正面臨一個難以讓下拉列表看起來很好，因為它搞砸了CSS

DEMO.HTML ：

<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="demo.css">
<style>
li{
    display: block;
}
</style>
</head>

<body>
    <div id='wrap'>
        <div id="clickable_div">MENU</div>
            <div id="nav_menu">
                <ul class="dropDown">
                    <li id="li_1"><img src="images/ori_12.png"></li>
                    <li id="li_2"><img src="images/ori_14.png"></li>
                    <li id="li_3"><img src="images/ori_15.png"></li>
                    <li id="li_4"><img src="images/ori_16.png"></li>
                </ul>
            </div>
        </div>
    </div>

</body>
<script>

        $('#wrap').mouseover( function(){
            $('#nav_menu').slideDown();
        });
        $('#wrap').mouseleave( function(){
            $('#nav_menu').slideUp();
        });
        $('#nav_menu li img')
        .mouseover(function () {
            this.src = this.src.replace('/ori_', '/hover_');
        })
        .mouseout(function () {
            this.src = this.src.replace('/hover_', '/ori_');
        });

    </script>
</html>

DEMO.CSS ：

#clickable_div {
    width: 166px; 
    background-color: #9c9c9c;
    display: block;
}
#nav_menu {
    width: 166px; 
    height: auto; 
    background-color: #CCC; 
    display: none
}
//*{padding:0;margin:0} This will achieve what I want but eventually all my other elements on the same page will have no padding and margin
#wrap { 
    width: 166px;
}

通過復制代碼，您將看到下拉菜單搞砸了。 它可以通過使用*{padding:0;margin:0}來修復，但是同一頁面上的所有其他元素都沒有填充和邊距，這絕對不是所需的輸出。 我已經嘗試為每個元素設置填充和邊距為0，例如#wrap ， #nav_menu #wrap ，但它們都#nav_menu 。

Answer 1

你的問題是ul ，默認情況下需要一些余量。 您可以單獨重置它。

嘗試添加這個

ul.dropDown{
    margin:0px;
}

小提琴

加上快速上下移動菜單上的過渡問題可以使用stop()來解決，還要注意mouseleave配對事件是mouseenter而不是mouseover所以試試

   $('#wrap').mouseenter( function(){
        $('#nav_menu').stop(true, true).slideDown();
    }).mouseleave( function(){
        $('#nav_menu').stop(true, true).slideUp();
    });

要不就

     $('#wrap').on( 'mouseenter mouseleave', function(){
        $('#nav_menu').stop(true, true).slideToggle();
    });

小提琴

Answer 2

當您在CSS中使用星號（*）作為選擇器時，您將選擇頁面上的每個元素！ 這是很多選擇。 幸運的是，CSS提供了一種僅選擇特定元素的方法。

例如，您要選擇的只是頁面上的<ul> ，對吧？ 對於選擇器，請遵循以下模式： parent child{margin:0px;}為了實現此目的，您可以執行此操作： #nav_menu ul.dropDown{margin: 0px;} 。

這應該可以解決你的問題！

CSS邊距和填充問題

問題描述

2 個解決方案

解決方案1
1 已采納 2013-09-26 02:19:05

解決方案2
1 2013-09-26 02:25:41

CSS邊距和填充問題

問題描述

2 個解決方案

解決方案1 1 已采納 2013-09-26 02:19:05

解決方案2 1 2013-09-26 02:25:41

解決方案1
1 已采納 2013-09-26 02:19:05

解決方案2
1 2013-09-26 02:25:41