Navigationsleiste und das logo auf der gleichen Linie?

Wie bekomme ich die Navigationsleiste erscheint neben dem logo, anstatt zu brechen in die nächste Zeile darunter?
Ich habe versucht, mehrere änderungen, aber es geht auf der nächsten Zeile. Ich versuche zu vermeiden, mit schwebt da wurde mir gesagt Sie sind nicht gut zu verwenden. Ich will es zu schauen, wie die Navigationsleiste auf dieser website in diesem Ende:
http://www.freecsstemplates.org/

Ich würde gerne verstehen, wie es getan wird, auf, die website.

Ich bin gerade sehr verwirrt, wie der Prozess ist, um zu arbeiten.

CSS:

#header
{
background-image:url('menubg.png');
background-repeat:repeat-x;
}
#logo
{
display:inline-block;
}
#menu ul
{
display:inline-block;
list-style-type:none;
padding: 0px;
margin:0px;
}

#menu li
{
display:inline-block;
margin:0px;
padding:0px;
}

#menu a:link,a:visited
{
display:inline-block;
text-transform:lowercase;
width:auto;
font-weight:bold;
padding-left:47.5px;
padding-right:47.5px;
padding-top:9px;
padding-bottom:9px;
text-decoration:none;
color:#57fafc;
text-align:center;
background-color:#62d2d3;
}

#menu a:hover,a:active
{
background-color:#7ce5e6;
}

HTML:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mainstyle.css">
<title>Blah</title></head>
<body>
<div id="header">
<div id="logo"><img src="logo.png" /></div>
<div id="menu">
      <ul>
        <li><a href="#">Home</a></li><li><a 

href="#">Contact</a></li><li><a href="#">About</a></li><li><a 

href="#">Products</a></li><li><a href="#">Design-a-Tee</a></li><li><a 

href="#">Reviews/Testimonials</a></li>
      </ul>
</div>
</div>
</body>
</html>
  • setzen Sie das logo in der ul element.
  • Ich will die Kontrolle der Abstand des Logos vom rest der Navigationsleiste, wenn ich es hinzufügen, dann wird es nur gefüttert werden, mit dem rest des links, oder etwa nicht?
  • Sie konnten mit dem nth-child-Selektor für das styling der ersten li. hier finden Sie eine exlanation w3schools.com/cssref/tryit.asp?filename=trycss3_nth-child
  • wer auch immer gesagt Sie schwimmt schlecht sind, ist falsch, so zu ignorieren, dass die schlecht beraten. Ein Element, das dauert, bis eine vollständige Zeile display : block. Wenn Sie ändern die auf display : inline oder inline-block, so werden die Elemente auf der gleichen Linie.
  • Erweitern Ehrenvolle Chow Punkt: es gibt sehr wenige absolute Wahrheiten, in die web-Entwicklung. Manchmal schwimmt sind das falsche Werkzeug, manchmal sind Sie das richtige Werkzeug, und nur zum lernen und Erfahrung wird Ihnen helfen, herauszufinden, was was ist.
  • Wie kann ich richten Sie die Navigationsleiste vertikal?

InformationsquelleAutor bratattack | 2014-04-28
  1. 1

    hinzufügen dieser css -

    #logo {
    float:left;
}
#menu {
    float:right;    
}
#header {
    clear: both;
    overflow: auto;
}
    InformationsquelleAutor omkar khade
Schreibe einen Kommentar