HTML & CSS - Navigationsleiste schwebt nicht horizontal mit Float links

-1

Versuchen, eine Navigationsleiste horizontal mit dem Logo auf der linken Seite zu machen, aber der Text wird nicht verschoben. Irgendjemand hat eine Idee warum nicht?HTML & CSS - Navigationsleiste schwebt nicht horizontal mit Float links

https://jsfiddle.net/herxforn/1/

CSS

body { 
    width 100%; 
    max-width: 960px; 
    margin: 0 auto; 
} 

nav { 
    width: 100%; 
    margin: 20px 0; 
} 

nav ul { 
    width: 100%; 
    list-style: none; 
    margin: 0; 
    padding: 0; 
} 

nav ul li { 
    width: 20%; 
    float: left; 

} 

nav ul li a { 
    display: block; 
    width: 100%; 
}

Quelle

2016-07-28 killerwild

Sie haben 'float nicht verwendet –

Verwenden Sie 'float: left' für das Logo und' float: right' on 'nav' und ersetzen Sie' width' width 'max-width: 80%' oder etwas Ähnliches. –

hinzugefügt Demo

body { 
 
    width 100%; 
 
    max-width: 960px; 
 
    margin: 0 auto; 
 
} 
 

 
nav { 
 
    width: 100%; 
 
    margin: 20px 0; 
 
} 
 

 
nav ul { 
 
    width: 100%; 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
nav ul li, 
 
nav ul li a { 
 
    display: inline-block; 
 
}

<!DOCTYPE html> 
 

 

 

 
<title>URBANFITNESSNI</title> 
 

 
<body> 
 

 

 
    <img src="C:\Users\Ross\Documents\UrbanFitnessNi\assets\logo.png" alt="logo"> 
 

 

 
    <nav> 
 
    <ul> 
 
     <li> 
 
     <a href="/home">Home</a> 
 
     </li> 
 
     <li> 
 
     <a href="/about">About Us</a> 
 
     </li> 
 
     <li> 
 
     <a href="/membership">Membership Details</a> 
 
     </li> 
 
     <li> 
 
     <a href="/facilities">Facilities</a> 
 
     </li> 
 
     <li> 
 
     <a href="/faq">FAQ</a> 
 
     </li> 
 
    </ul> 
 
    </nav> 
 

 
</body>

löschen

nav ul li { 
    width: 20%; 
    float: left; 

} 

nav ul li a { 
    display: block; 
    width: 100%; 
}

und Änderung für dieses:

nav ul li, 
nav ul li a { 
    display: inline-block; 
}

Quelle

2016-07-28 15:31:50

So sieht es jetzt aus, das ist das gleiche wie zuvor: http://puu.sh/qhwJj/af5a41105b.png – killerwild

Demo hinzugefügt. Überprüfen Sie es –

mb nicht rechts verknüpften Stylesheet? –

Blick auf diese.

https://jsfiddle.net/herxforn/5/

ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #333333; 
 
} 
 

 
li { 
 
    float: left; 
 
} 
 

 
li a { 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 16px; 
 
    text-decoration: none; 
 
}

<!DOCTYPE html> 
 

 

 

 
<title>URBANFITNESSNI</title> 
 

 
<body> 
 

 

 
    <img src="C:\Users\Ross\Documents\UrbanFitnessNi\assets\logo.png" alt="logo"> 
 

 

 
    
 
    <ul> 
 
     <li> 
 
     <a href="/home">Home</a> 
 
     </li> 
 
     <li> 
 
     <a href="/about">About Us</a> 
 
     </li> 
 
     <li> 
 
     <a href="/membership">Membership Details</a> 
 
     </li> 
 
     <li> 
 
     <a href="/facilities">Facilities</a> 
 
     </li> 
 
     <li> 
 
     <a href="/faq">FAQ</a> 
 
     </li> 
 
    </ul> 
 
    
 

 
</body>

Quelle

2016-07-28 15:35:51

Immer noch das gleiche wie vorher ... http: //puu.sh/qhwYE/d09469f6ee.png – killerwild

Öffnen Sie den Link Mann, den ich in der Antwort zur Verfügung gestellt !! –

Sie können es mit flexboxes tun:

body { 
 
    width 100%; 
 
    max-width: 960px; 
 
    margin: 0 auto; 
 
} 
 

 
nav { 
 
    width: 100%; 
 
    margin: 20px 0; 
 
    display: flex; 
 
} 
 

 
nav img{ 
 
    max-width: 50px; 
 
    max-heigth: 50px; 
 
} 
 
nav ul { 
 
    flex: 1; 
 
    width: 100%; 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    display: flex; 
 
    height: 50px; 
 
} 
 

 
nav ul li { 
 
    flex: 1; 
 
} 
 

 
nav ul li a { 
 
    display: block; 
 
    width: 100%; 
 
}

<!DOCTYPE html> 
 

 

 

 
<title>URBANFITNESSNI</title> 
 
<body> 
 
    <nav> 
 
    <img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Logo_TV_2015.png" alt="logo" height="50px" width="50px"> 
 
    <ul> 
 
     <li> 
 
     <a href="/home">Home</a> 
 
     </li> 
 
     <li> 
 
     <a href="/about">About Us</a> 
 
     </li> 
 
     <li> 
 
     <a href="/membership">Membership Details</a> 
 
     </li> 
 
     <li> 
 
     <a href="/facilities">Facilities</a> 
 
     </li> 
 
     <li> 
 
     <a href="/faq">FAQ</a> 
 
     </li> 
 
    </ul> 
 
    </nav> 
 

 
</body>

Quelle

2016-07-28 15:45:05

Sie benötigen einen cla hinzufügen ss zu Ihrem Bild und schweben Sie es auch nach links.

css

body { 
    width 100%; 
    max-width: 960px; 
    margin: 0 auto; 
} 

nav { 
    width: 100%; 
    margin: 20px 0; 
} 

nav ul { 
    width: 100%; 
    list-style: none; 
    margin: 0; 
    padding: 0; 
} 

nav ul li, 
nav ul li a { 
    display: inline-block; 
} 

.logo { 
    float: left; 
}

html

<!DOCTYPE html> 



<title>URBANFITNESSNI</title> 

<body> 


    <img src="C:\Users\Ross\Documents\UrbanFitnessNi\assets\logo.png" alt="logo" class="logo"> 


    <nav> 
    <ul> 
     <li> 
     <a href="/home">Home</a> 
     </li> 
     <li> 
     <a href="/about">About Us</a> 
     </li> 
     <li> 
     <a href="/membership">Membership Details</a> 
     </li> 
     <li> 
     <a href="/facilities">Facilities</a> 
     </li> 
     <li> 
     <a href="/faq">FAQ</a> 
     </li> 
    </ul> 
    </nav> 

</body>

Quelle

2016-07-28 15:46:20 NosNits

eine Navigationsleiste horizontal mit dem Logo auf der linken Seite

das Logo in der nav Setzen Sie ein das Bild schweben und die ul

01 left` in Ihrem CSS !!!:

body { 
 
    width 100%; 
 
    max-width: 960px; 
 
    margin: 0 auto; 
 
} 
 
nav { 
 
    margin: 20px 0; 
 
    background: black; 
 
    float: left; 
 
    width: 100%; 
 
} 
 
nav img { 
 
    float: left; 
 
} 
 
nav ul { 
 
    float: left; 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
nav ul li { 
 
    float: left; 
 
    padding: 1em; 
 
} 
 
nav ul li a { 
 
    display: block; 
 
    color: white; 
 
    text-decoration: none; 
 
    text-align: center; 
 
}

<nav> 
 
    <img src="http://www.fillmurray.com/40/40" alt="logo"> 
 
    <ul> 
 
    <li> 
 
     <a href="/home">Home</a> 
 
    </li> 
 
    <li> 
 
     <a href="/about">About Us</a> 
 
    </li> 
 
    <li> 
 
     <a href="/membership">Membership Details</a> 
 
    </li> 
 
    <li> 
 
     <a href="/facilities">Facilities</a> 
 
    </li> 
 
    <li> 
 
     <a href="/faq">FAQ</a> 
 
    </li> 
 
    </ul> 
 
</nav>

Quelle

2016-07-28 15:46:35

HTML & CSS - Navigationsleiste schwebt nicht horizontal mit Float links

Antwort

Verwandte Themen