Moin,
bin Newbee und würde mich über eine kleine Hilfe freuen und zwar möchte ich die Navigationsleiste meiner Seite nach Rechts gelistet wird und nicht untereinander aufgelistet wird.
Danke im vorraus. Habe bisher 2 Nav Punkte
Mit freundlichem Gruß
Moin,
bin Newbee und würde mich über eine kleine Hilfe freuen und zwar möchte ich die Navigationsleiste meiner Seite nach Rechts gelistet wird und nicht untereinander aufgelistet wird.
Danke im vorraus. Habe bisher 2 Nav Punkte
Mit freundlichem Gruß
dann zeig doch mal deinen deinen Code.
Dir könnte vieleicht display:flex; helfen .ist aber raterrei weil ich deinen Code nicht kenne:
Das ist leider ziemlich magere Information,
es gibt mehrere Möglichkeiten das Problem zu beheben das kommt aber drauf an wie dein Quelltext/Code aussiehst also dein Inhalt.
Es währe gut wenn du uns diesen noch dazuschreiben könntest eventuell könnte dir das hier helfen
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
Falls du einen Gesamten Quelltext su einer Navigationsleiste ink. Dropdown brauchst dann hier :
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
.navbar {
overflow: hidden;
background-color: #333;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
<div class="navbar">
<a href="#home">Home</a>
<a href="#news">News</a>
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
</div>
<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>
</body>
</html>
Alles anzeigen
Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!
HTML-Seminar.de - mit Videos zum schnellen Lernen, wie man eine Website selbst erstellt.