Einstellen der Menü-Breite je nach Fensterbreite

Entwerfe ich navigation menu, aber ich konnte nicht passen der Breite nach Fenster. Ich möchte menu width 100%, wie ändern wir die Größe des Fensters, das Menü immer noch bedeckt von der linken Ecke zur rechten Ecke.

Den folgenden code verwende ich für die Gestaltung der navigation:

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;
}

Hier die JSFIDDLE LINK

Die Frage ist sehr unklar. Könnten Sie erklären, mehr/besser? Wie das, was element wollen Sie 100% Breite?
Ich möchte das Navigationsmenü in einer Weise, so dass es berühren Sie Links und rechts auch wenn ich die screen-Größe.
Ich bin mir nicht sicher, ob Ihr die gleichen, die Sie suchen, aber würden Sie bitte prüfen Sie diesen link - stackoverflow.com/questions/10647178/... , wenn es Sinn macht.

InformationsquelleAutor Ankit Tuli | 2013-08-06

  1. 0

    Wenn Sie wollen width 100% zur navigation Menüleiste. Versuchen Sie die folgenden CSS für den HTML-Code.

    CSS

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

    Hier die JSFIDDLE LINK

    InformationsquelleAutor Mohit Bhansali

  2. 1

    Einstellung eine min-width zu übergeordneten element, wird dieses Problem lösen. Aber immer noch könnte es schaffen, eine schriftrolle oder wenn du overflow auf hidden, es wird die Ernte ein bisschen text.
    Um dies zu verhindern scrollen /cropping können Sie javascript verwenden, oder css3 media query. Ich bevorzuge Medien-Abfragen über javascript-Lösung. Aber vielleicht brauchen css3 unterstützten browser.
    Hier ist die geänderte fiddle mit css-media-query 

    .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;
}
}

    InformationsquelleAutor chamath

Schreibe einen Kommentar