Wie Sie logo auf der linken Seite und die navigation auf der rechten Seite?

Wie Sie das logo auf meiner Navigationsleiste?

Mein HTML code ist:

<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="icon" type="image/png" href="SENCOR_Logo.ico">
<title>SENCOR</title>
</head>
<body>
<div class="bg-div">
    <img class="logo-img" src="SENCOR_Logo.jpg" ALT="align box" ALIGN=CENTER>
    <nav>
        <ul>
            <li><a href="#">Monitoring</a></li>
            <li><a href="#">Process</a></li>
            <li><a href="#">Post and Create Email/Excel</a></li>
            <li><a href="#">Reports</a></li>
            <li><a href="#">Tools</a></li>
            <li><a href="#">Sales</a></li>
        </ul>
    </nav>
</div>
</body>
</html>

und hier ist mein Stil.css-code:

body{
    margin: 0;
    padding: 0;
    font-size: 15px;
}

/* Navigation */
nav{
    margin: 0;
    overflow:hidden;
    text-align: center;
}

nav ul{
    margin: 0;
    padding: 0;
}

nav ul li{
    display: inline-block;
    list-style-type: none;
}

nav > ul > li > a{
    color: #aaa;
    display: block;
    line-height: 2em;
    padding: 0.5em 1em;
    text-decoration: none;
}
-----------
.logo-img{
    position: relative;
    margin: 10px 15px 15px 10px;
}
.bg-div{
    background:#333;
}

Möchte ich zeigen das logo an der linken Seite und in der Navigationsleiste auf der rechten Seite.

InformationsquelleAutor Emz1402 | 2016-01-29
  1. 4

    Hier ist ein Stift:

    http://codepen.io/toddmoore/pen/JGvVpB

    .logo-img {
    float: left;
    position: relative;
    margin: 10px 15px 15px 10px;
}
.bg-div {
   overflow: hidden;
}
nav {
    float: left;
}

    Ich davon aus, dass Sie wollen, dass Sie in der traditionellen Weise. Wenn Sie möchten, dass der nav auf der gegenüberliegenden Seite von der Seite float es right.

    Könnten Sie auch diese umsetzen mit flex, aber für jetzt, ich würde stick zu float wenn Sie neu in css.

    Den overflow hidden kann der container, der die beiden schwebten Elemente zu erweitern, um Ihre Höhe, weil sonst schwebt die Flucht der Fluss der Dokumente des Containers zerstört.

    • danke.. ich habe versucht den code, den Sie mir gab, aber das Ergebnis ist, dass das logo überschreiben der Navigationsleiste.. also habe ich den code ändern, der in der nav float:left; zu float: right;
    • Sie müssen geben dem logo height und width Dimensionen, habe ich Sie in meiner Feder Beispiel, das ich Ihnen gab, sollten Sie die Werte einstellen, um was auch immer die height und width Ihr logo ist. Es ist vollkommen gültig, um Sie auf die Attribute des image-tag, oder Sie können Sie in Ihrem .logo-img Klasse.
    • yeah.. danke.. ich habe es jetzt..
    InformationsquelleAutor Todd Moore
  2. 1

    Die einfachste und grundlegendste Antwort ist, verwenden Sie schwebt.

    .logo-img {
    float: left;
}
nav {
    float: right;
}
    InformationsquelleAutor hungerstar
  3. 0

    Normalerweise ist es besser zu nutzen "position: fixed;" für navigation bars an der Spitze. Also, dein css kann dies so tun:

    .logo-img{
    position: fixed;
    margin: 10px 15px 15px 10px;
    left: 0;
    display:inline;
}

.bg-div{
    background:#333;
    height: 50px;
}

.bg-div nav {
    position: fixed;
    display:inline;
    right: 0;
}
    InformationsquelleAutor Heron Yang
Schreibe einen Kommentar