Cómo alinear el logo a la izquierda y a la navegación en el lado derecho?

Cómo alinear el logo a mi barra de navegación?

Mi código HTML es:

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

y heres mi estilo.código css:

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

Quiero mostrar el logotipo en la parte izquierda y la barra de navegación a la derecha.

OriginalEl autor Emz1402 | 2016-01-29

3 Kommentare

  1. 2

    Aquí un lápiz:

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

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

    Estoy asumiendo que usted desea que se establezca en la forma tradicional. Si desea que la navegación en el lado opuesto de la página float se right.

    También se podría implementar esto usando flexpero por ahora yo me quedaría con float si eres nuevo en css.

    La overflow hidden permite que el contenedor de los dos flotaban elementos para ampliar a su altura, de lo contrario, porque flota de escape en el flujo del documento, el contenedor se derrumba.

    gracias.. me han probar el código que me dio, pero el resultado es que el logotipo de la sobreescritura de la barra de navegación.. así que me cambie el código de la nav float:left; float: right;
    Usted necesita dar el logotipo de height y width dimensiones, me he fijado en mi pluma ejemplo que les he dado, debe establecer los valores a lo que el height y width de tu logotipo. Es perfectamente válido para el conjunto de ellos en los atributos de la etiqueta de imagen o se pueden configurar en su .logo-img clase.
    yeah.. gracias.. yo tengo ahora..

    OriginalEl autor Todd Moore

  2. 1

    La más sencilla y básica de la respuesta es que, en uso de las carrozas.

    .logo-img {
        float: left;
    }
    nav {
        float: right;
    }

    OriginalEl autor hungerstar

  3. 0

    Normalmente, es mejor usar «position: fixed;» para las barras de navegación en la parte superior. Así, la css se puede hacer como esta:

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

    OriginalEl autor Heron Yang

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea