CSS導致在右邊的空白間隙

這段CSS代碼導致問題。 http://www.asifslab.com他們是顯示未使用的空間，但我找不到錯誤。當我拿出這些代碼時，他們的側面沒有空間，但是當它們在那裏有很長的距離時。CSS導致在右邊的空白間隙

@import url(http://fonts.googleapis.com/css?family=Oxygen+Mono); 
/* Starter CSS for Menu */ 
#cssmenu { 
    padding: 0; 
    margin: 0; 
    border: 0; } 

#cssmenu ul, #cssmenu li { 
    list-style: none; 
    margin: 0; 
    padding: 0; } 

#cssmenu ul { 
    position: relative; 
    z-index: 597; } 

#cssmenu ul li { 
    float: left; 
    min-height: 1px; 
    vertical-align: middle; } 

#cssmenu ul li.hover, 
#cssmenu ul li:hover { 
    position: relative; 
    z-index: 599; 
    cursor: default; } 

#cssmenu ul ul { 
    visibility: hidden; 
    position: absolute; 
    top: 100%; 
    left: 0; 
    z-index: 598; 
    width: 100%; } 

#cssmenu ul ul li { 
    float: none; } 

#cssmenu ul ul ul { 
    top: 0; 
    left: auto; 
    right: -99.5%; } 

#cssmenu ul li:hover > ul { 
    visibility: visible; } 

#cssmenu ul ul { 
    bottom: 0; 
    left: 0; } 

#cssmenu ul ul { 
    margin-top: 0; } 

#cssmenu ul ul li { 
    font-weight: normal; } 

#cssmenu a { 
    display: block; 
    line-height: 1em; 
    text-decoration: none; } 

/* Custom CSS Styles */ 
#cssmenu { 
    background: #333; 
    border-bottom: 4px solid #ff3a34; 
    font-family: 'Oxygen Mono', Tahoma, Arial, sans-serif; 
    font-size: 12px; 
    position: relative; 
    margin-left: -8px; 
    margin-right: -8px; 
    z-index: 1000; 
} 

    #cssmenu:after, #cssmenu ul:after { 
    content: ''; 
    display: block; 
    clear: both; } 
    #cssmenu ul { 
    text-transform: uppercase; } 
    #cssmenu ul ul { 
     border-top: 4px solid #ff3a34; 
     text-transform: none; 
     min-width: 190px; } 
     #cssmenu ul ul a { 
     background: #ff3a34; 
     color: #FFF; 
     border: 1px solid #ff0901; 
     border-top: 0 none; 
     line-height: 150%; 
     padding: 16px 20px; } 
     #cssmenu ul ul ul { 
     border-top: 0 none; } 
     #cssmenu ul ul li { 
     position: relative; } 
     #cssmenu ul ul li:first-child > a { 
      border-top: 1px solid #ff0901; } 
     #cssmenu ul ul li:hover > a { 
      background: #ff534d; } 
     #cssmenu ul ul li:last-child > a { 
      -moz-border-radius: 0 0 3px 3px; 
      -webkit-border-radius: 0 0 3px 3px; 
      border-radius: 0 0 3px 3px; 
      -moz-background-clip: padding; 
      -webkit-background-clip: padding-box; 
      background-clip: padding-box; 
      -moz-box-shadow: 0 1px 0 #ff3a34; 
      -webkit-box-shadow: 0 1px 0 #ff3a34; 
      box-shadow: 0 1px 0 #ff3a34; } 
     #cssmenu ul ul li:last-child:hover > a { 
      -moz-border-radius: 0 0 0 3px; 
      -webkit-border-radius: 0 0 0 3px; 
      border-radius: 0 0 0 3px; 
      -moz-background-clip: padding; 
      -webkit-background-clip: padding-box; 
      background-clip: padding-box; } 
     #cssmenu ul ul li.has-sub > a:after { 
      content: '+'; 
      position: absolute; 
      top: 50%; 
      right: 15px; 
      margin-top: -8px; } 
    #cssmenu ul li:hover > a, #cssmenu ul li.active > a { 
     background: #ff3a34; 
     color: #FFF; } 
    #cssmenu ul li.has-sub > a:after { 
     content: '+'; 
     margin-left: 5px; } 
    #cssmenu ul li.last ul { 
     left: auto; 
     right: 0; } 
     #cssmenu ul li.last ul ul { 
     left: auto; 
     right: 99.5%; } 
    #cssmenu a { 
    background: #333; 
    color: #CBCBCB; 
    padding: 0 20px; } 
    #cssmenu > ul > li > a { 
    line-height: 48px; }

來源

2013-02-08 Asmastas Maz

只是爲了澄清htmled的答案，從w3schools.com兩個引號：

「可見性：隱藏隱藏的元素，但它仍然會像以前那樣佔用同一空間的元素會被隱藏，但仍然影響佈局。」「

」display：none隱藏一個元素，並且它不會佔用任何空間，元素將被隱藏，並且頁面將被顯示，就好像元素不存在一樣。

鏈接：http://www.w3schools.com/css/css_display_visibility.asp

來源

2013-02-09 14:47:22 matsolof

除了使用visibility屬性，使用display代替。

下選擇需要改變：

#cssmenu ul ul { 
    visibility: hidden; 
    position: absolute; 
    top: 100%; 
    left: 0; 
    z-index: 598; 
    width: 100%; 
} 

#cssmenu ul li:hover > ul { 
    visibility: visible; 
}

這樣：

#cssmenu ul ul { 
    display: none; 
    position: absolute; 
    top: 100%; 
    left: 0; 
    z-index: 598; 
    width: 100%; 
} 

#cssmenu ul li:hover > ul { 
    display: block; 
}

這將解決您的問題。

Working example on jsFiddle。

來源

2013-02-08 08:48:57

CSS導致在右邊的空白間隙

回答

相關問題