2012-08-31 158 views
0

我的例子是:http://www.interfaithmedical.com/sfish/example.htmlUL問題的寬度,CSS寬度不工作

它包含HTML標籤:

<ul class="sf-menu"> 

我想舒展UL的確切960像素的寬度。每個LI均勻拉伸並且能夠將其放入DIV中而不需要任何填充。我試圖增加主要UL的寬度:

.sf-menu ul { 
    position: absolute; 
    top: -999em; 
    width: 960px; 
} 

但它的寬度未設置爲960px。寬度:屬性似乎是無效的。

下面是HTML文件:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 

<html lang="en"> 
    <head> 
    <title>A very basic Superfish menu example</title> 
    <meta http-equiv="content-type" content="text/html;charset=utf-8"> 
    <link rel="stylesheet" type="text/css" href="css/superfish.css" media="screen"> 
    <script src="http://code.jquery.com/jquery-1.7.1.min.js" type="text/javascript"></script> 
    <script type="text/javascript" src="js/hoverIntent.js"></script> 
    <script type="text/javascript" src="js/superfish.js"></script> 
    <script type="text/javascript"> 
     // initialise plugins 
     jQuery(function() { 
     jQuery('ul.sf-menu').superfish(); 
     }); 
    </script> 
    </head> 

    <body> 
    <div style="width: 960px; height: 2.2em; border: 1px solid blue;"> 
     <ul class="sf-menu"> 
     <li class="current"> <a href="#a">Medical Services</a> 
      <ul> 
      <li><a href="#aa">Behavioral Health</a></li> 
      <li><a href="#aa">Clinical Labrotary</a></li> 
      <li><a href="#aa">Dentistry</a></li> 
      <li><a href="#aa">Emergency</a></li> 
      <li><a href="#aa">Gynecology</a></li> 
      <li><a href="#aa">Medicine</a></li> 
      <li><a href="#aa">Pastoral</a></li> 
      <li><a href="#aa">Pediatrics</a></li> 
      <li><a href="#aa">Physical Medicine & Rehab</a></li> 
      <li><a href="#aa">Radiology</a></li> 
      <li><a href="#aa">Surgery</a></li> 
      <li><a href="#aa">Women's Health</a></li> 
      <li><a href="#aa">Other Services</a></li> 
      </ul> 
     </li> 

     <li class="current"> <a href="#a">About Us</a> 
      <ul> 
      <li><a href="#aa">Behavioral Health</a></li> 
      <li><a href="#aa">Clinical Labrotary</a></li> 
      <li><a href="#aa">menu item that is quite long</a></li> 
      <li><a href="#aa">menu item that is quite long</a></li> 
      <li><a href="#aa">menu item that is quite long</a></li> 
      <li><a href="#aa">menu item that is quite long</a></li> 
      <li><a href="#aa">menu item that is quite long</a></li> 
      <li><a href="#aa">menu item that is quite long</a></li> 
      <li><a href="#aa">menu item that is quite long</a></li> 
      </ul> 
     </li> 

     <li class="current"> <a href="#a">Medical Educations</a> 
      <ul> 
      <li><a href="#aa">Behavioral Health</a></li> 
      <li><a href="#aa">Clinical Labrotary</a></li> 
      <li><a href="#aa">menu item that is quite long</a></li> 
      <li><a href="#aa">menu item that is quite long</a></li> 
      <li><a href="#aa">menu item that is quite long</a></li> 
      <li><a href="#aa">menu item that is quite long</a></li> 
      <li><a href="#aa">menu item that is quite long</a></li> 
      <li><a href="#aa">menu item that is quite long</a></li> 
      <li><a href="#aa">menu item that is quite long</a></li> 
      </ul> 
     </li> 

     <li class="current"> <a href="#a">Patients & Visitors</a> 
      <ul> 
      <li><a href="#aa">Behavioral Health</a></li> 
      <li><a href="#aa">Clinical Labrotary</a></li> 
      <li><a href="#aa">menu item that is quite long</a></li> 
      <li><a href="#aa">menu item that is quite long</a></li> 
      <li><a href="#aa">menu item that is quite long</a></li> 
      <li><a href="#aa">menu item that is quite long</a></li> 
      <li><a href="#aa">menu item that is quite long</a></li> 
      <li><a href="#aa">menu item that is quite long</a></li> 
      <li><a href="#aa">menu item that is quite long</a></li> 
      </ul> 
     </li> 

     <li><a href="findDoctors.php" class="navlink">Find a Doctor</a></li> 
     <li><a href="contactUs.php" class="navlink">Contact Us</a></li> 
     </ul> 
    </div> 
    </body> 
</html> 

這裏是CSS文件superfish.css:

/*** ESSENTIAL STYLES ***/ 
* { 
    padding: 0; 
    margin: 0; 
} 

.sf-menu, .sf-menu * { 
    margin: 0; 
    padding: 0; 
    list-style: none; 
} 

.sf-menu { 
    line-height: 1.0; 
} 

.sf-menu ul { 
    position: absolute; 
    top: -999em; 
    width: 10em; 
/* left offset of submenus need to match (see below) 10em */ 
} 

#trt { 
    width: 20em; 
} 

.sf-menu ul li { 
    width: 100%; 
} 

.sf-menu li:hover { 
    visibility: inherit; 
/* fixes IE7 'sticky bug' */ 
} 

.sf-menu li { 
    float: left; 
    position: relative; 
} 

.sf-menu a { 
    display: block; 
    position: relative; 
} 

.sf-menu li:hover ul, 
    .sf-menu li.sfHover ul { 
    left: 0; 
    top: 2.2em; 
/* match top ul list item height */ 
    z-index: 99; 
} 

ul.sf-menu li:hover li ul, 
    ul.sf-menu li.sfHover li ul { 
    top: -999em; 
} 

ul.sf-menu li li:hover ul, 
    ul.sf-menu li li.sfHover ul { 
    left: 10em; 
/* match ul width */ 
    top: 0; 
} 

ul.sf-menu li li:hover li ul, 
    ul.sf-menu li li.sfHover li ul { 
    top: -999em; 
} 

ul.sf-menu li li li:hover ul, 
    ul.sf-menu li li li.sfHover ul { 
    left: 10em; 
/* match ul width */ 
    top: 0; 
} 

    /*** DEMO SKIN ***/ 
.sf-menu { 
    float: left; 
    margin-bottom: 1em; 
} 

.sf-menu a { 
    border-left: 1px solid #fff; 
    border-top: 1px solid #CFDEFF; 
    padding: .75em 1em; 
    text-decoration: none; 
} 

.sf-menu a, .sf-menu a:visited { 
/* visited pseudo selector so IE6 applies text colour*/ 
    color: #FFFFFF; 
    font-family: Verdana; 
    font-size: 13px; 
} 

.sf-menu li { 
    background: #1B83EF; 
} 

.sf-menu li li { 
    background: #1B83EF; 
} 

.sf-menu li:hover, .sf-menu li.sfHover, 
    .sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active { 
    background: #12ACFC; 
    outline: 0; 
} 

    /*** arrows **/ 
.sf-menu a.sf-with-ul { 
    padding-right: 2.25em; 
    min-width: 1px; 
/* trigger IE7 hasLayout so spans position accurately */ 
} 

.sf-sub-indicator { 
    position: absolute; 
    display: block; 
    right: .75em; 
    top: 1.05em; 
/* IE6 only */ 
    width: 10px; 
    height: 10px; 
    text-indent: -999em; 
    overflow: hidden; 
    background: url('../images/arrows-ffffff.png') no-repeat -10px -100px; 
/* 8-bit indexed alpha png. IE6 gets solid image only */ 
} 

a > .sf-sub-indicator { 
    /* give all except IE6 the correct values */ 
    top: .8em; 
    background-position: 0 -100px; 
/* use translucent arrow for modern browsers*/ 
} 
    /* apply hovers to modern browsers */ 
a:focus > .sf-sub-indicator, 
    a:hover > .sf-sub-indicator, 
    a:active > .sf-sub-indicator, 
    li:hover > a > .sf-sub-indicator, 
    li.sfHover > a > .sf-sub-indicator { 
    background-position: -10px -100px; 
/* arrow hovers for modern browsers*/ 
} 

    /* point right for anchors in subs */ 
.sf-menu ul .sf-sub-indicator { 
    background-position: -10px 0; 
} 

.sf-menu ul a > .sf-sub-indicator { 
    background-position: 0 0; 
} 
    /* apply hovers to modern browsers */ 
.sf-menu ul a:focus > .sf-sub-indicator, 
    .sf-menu ul a:hover > .sf-sub-indicator, 
    .sf-menu ul a:active > .sf-sub-indicator, 
    .sf-menu ul li:hover > a > .sf-sub-indicator, 
    .sf-menu ul li.sfHover > a > .sf-sub-indicator { 
    background-position: -10px 0; 
/* arrow hovers for modern browsers*/ 
} 

    /*** shadows for all but IE6 ***/ 
.sf-shadow ul { 
    background: url('../images/shadow.png') no-repeat bottom right; 
    padding: 0 8px 9px 0; 
    -moz-border-radius-bottomleft: 17px; 
    -moz-border-radius-topright: 17px; 
    -webkit-border-top-right-radius: 17px; 
    -webkit-border-bottom-left-radius: 17px; 
} 

.sf-shadow ul.sf-shadow-off { 
    background: transparent; 
} 
+0

對於用戶界面全寬刪除浮動:從.sf菜單 – supersaiyan

+0

左邊的CSS文件中間我刪除浮動:左,但沒有改變寬度。 – Interfaith

回答

2

不斷突破的問題分解成更簡單的,更簡單的片,直到它開始正常工作。取出不必要的代碼位以製作最簡單的<ul><li></li></ul>列表,然後在CSS文件中取出不必要的CSS位。這是一個消除過程,以找出阻止width屬性生效的原因。這可能是superfish中的某個東西重寫了width屬性。

CSS中有很多語法錯誤。爲了找出superfish如何與你的CSS代碼無關的確切性質,你將不得不簡化它,並刪除語法錯誤。 CSS非常寬容,它可以讓你在那裏放棄廢話,它會試圖解釋它。在這種情況下,你的花括號不符合其他人。要回到基礎並刪除語法錯誤。

+0

是否可以給我CSS? – Interfaith

+0

輸入,但沒有運氣。 – Interfaith

+0

你的html和css有10個左右的錯誤。我可以一遍又一遍,但這需要幾個小時,「爲什麼我的代碼不工作」這個問題不適合堆棧溢出的問題,因爲它太寬泛了。 –