如何根據窗口寬度調整菜單寬度

我正在設計navigation menu，但無法根據窗口調整寬度。我想製作menu width 100%，當我們改變窗口大小時，菜單仍然覆蓋從左上角到右下角。如何根據窗口寬度調整菜單寬度

下面的代碼我使用設計導航：

HTML

<nav class="span9"> 
<!-- Menu--> 
<ul id="menu" class="sf-menu"> 
    <li class=""><a href="index.html" class="sf-with-ul">HOME</a></li> 
    <li><a href="about.html">ABOUT</a></li> 
    <li><a href="services.html">SERVICES</a></li> 
    <li class=""><a href="work.html" class="sf-with-ul">WORK</a></li> 
    <li class=""><a href="blog.html" class="sf-with-ul">BLOG</a></li> 
    <li class=""><a href="tables_princing.html" class="sf-with-ul">FEATURES</a></li>               
    <li><a href="contact.html">CONTACT</a></li> 
</ul> 
<!-- End Menu--> 
</nav>

CSS

.sf-menu { 
    margin: 0; 
    padding-top: 7px; 
} 
.sf-menu > li { 
    position: relative; 
    float: left; 
    list-style: none; 
    line-height: 20px; 
    margin: 0 40px 0 0; 
} 
.sf-menu > li > a { 
    text-decoration: none; 
    display: block; 
    font-size: 17px; 
}

這裏JSFIDDLE LINK

來源

2013-08-06 Ankit Tuli

的問題是非常不清楚。你能解釋更多/更好嗎？像什麼元素你想100％的寬度？ – Dany

我想以這種方式製作導航菜單，因此即使更改屏幕尺寸，也會觸摸左側和右側角落。 –

@Ankit - 我不確定它是否與您正在尋找的相同，但是您會介意檢查此鏈接嗎？http://stackoverflow.com/questions/10647178/spread-dynamic-menu-on-full-page-width ，如果它是有道理的。 – whyAto8

如果你想使寬度100％的導航菜單欄。爲您的HTML嘗試以下CSS。

CSS

nav { 
    display: table; 
    width: 100%; 
    border-collapse: collapse; 
    border: none; 
} 
nav ul { 
    display: table-row; 
} 
nav li { 
    display: table-cell; 
    margin: 0; 
}

這裏JSFIDDLE LINK

來源

2013-08-06 16:55:45

將最小寬度設置爲父元素將解決此問題。但它仍然可能會創建滾動，或者如果將溢出設置爲隱藏，它會裁剪出一些文本。爲了防止這種滾動/裁剪，你可以使用javascript或css3 media query。我更喜歡JavaScript解決方案的媒體查詢。但是你可能需要css3支持的瀏覽器。下面是修改fiddle使用CSS媒體查詢

.sf-menu { 
margin: 0; 
padding-top:7px;} 
.sf-menu > li { 
position: relative; 
float: left; 
list-style: none; 
line-height: 20px; 
margin: 0 40px 0 0; 
} 
.sf-menu > li > a { 
text-decoration: none; 
display: block; 
font-size: 17px; 
} 
@media all and (min-width:500px){ 
.sf-menu > li { 
    position: relative; 
    float: left; 
    list-style: none; 
    line-height: 14px; 
    margin: 0 30px 0 0; 
}  
.sf-menu > li > a { 
    text-decoration: none; 
    display: block; 
    font-size: 14px; 
} 
}

來源

2013-08-06 12:12:39 chamath

如何根據窗口寬度調整菜單寬度

回答

相關問題