Estoy tratando de conseguir el texto (Inicio, Acerca de, Queso), etc para mostrar a la derecha de los iconos de los medios sociales, de modo que la base del texto está alineado con la base de los iconos que aparecen en la misma línea.

¿Cómo puedo hacer esto?

Mi código está en el violín aquí http://jsfiddle.net/pnX3d/

    <div class="grid_5" id="social_icons">
        <a href="http://www.facebook.com/print3dexpert" target="blank"><img src="img/facebook.png" alt="Click to visit us on Facebook"></a>
        <a href="http://www.twitter.com/print3dexpert" target="blank"><img src="img/twitter.png" alt="Click to visit us on Twitter"></a>
        <a href="http://pinterest.com/print3dexpert" target="blank"><img src="img/pinterest.png" alt="Click to visit us on Pininterest"></a>
        <a href="#"><img src="img/email.png" title="Click to contact us" alt="Contact us"></a>

    </div>

    <nav class="topmenu omega">
        <ul>
        <li><a href="#">Home</a> |</li>
        <li><a href="#">About Us</a> |</li>
        <li><a href="#">Cheeses</a></li>
        </ul>
    </nav>
  • Colocar el icono en un lapso de tiempo dentro de la li.
  • Ha mi respuesta trabajado?
InformationsquelleAutor Dano007 | 2013-09-14

5 Comentarios

  1. 1

    He conseguido que con el siguiente código:

    CSS:

    .container-header{
        line-height: 1.22;
    }
    #social_icons {
        padding: .5em;
        display: inline-block;
    }
    
    .topmenu li {
         display:inline-block;
         font-size: 1.5em;
         text-align: right;
    }
    .topmenu.omega{
         float:right;
    }
    ul{
         margin: 0;
    }
    li>a
    {
        font-size: 20px;
    }

    HTML:

    <div class="container-header">
      <div class="grid_5" id="social_icons">
    	<a href="http://fontawesome.io/icon/address-book/" target="blank"><img src="img/facebook.png" alt="Facebook"></a>
    	<a href="http://www.twitter.com/print3dexpert" target="blank"><img src="img/twitter.png" alt="Twitter"></a>
    	<a href="http://pinterest.com/print3dexpert" target="blank"><img src="img/pinterest.png" alt="Pininterest"></a>
    	<a href="#"><img src="img/email.png" title="Click to contact us" alt="Contact us"></a>
    
      </div>
    
      <nav class="topmenu omega">
    	<ul>
    	<li><a href="#">Home</a> |</li>
    	<li><a href="#">About Us</a> |</li>
    	<li><a href="#">Cheeses</a></li>
    	</ul>
      </nav>
    </div>

  2. 0

    Estos cambios en el CSS debe hacer el truco:

    #social_icons {
        padding: .5em;
        line-height: 1.22;
        float:left;
        vertical-align:bottom;
    }
    
    .topmenu li {
        display:inline-block;
        font-size: 1.5em;
        text-align: right;
        line-height: 1.22;
        float:left;
        vertical-align:bottom;
    }
  3. 0

    Gracias por tu aporte, pero en realidad me terminó usando el siguiente. Como este no es un sitio de producción, y solo estoy experimentando yo quería usar flex columnas. El siguiente en realidad reduce el código requerido así.

    HTML

    <div id="social_icons">
        <a href="http://www.facebook.com/print3dexpert" target="blank"><img src="img/facebook.png" alt="Click to visit us on Facebook"></a>
        <a href="http://www.twitter.com/print3dexpert" target="blank"><img src="img/twitter.png" alt="Click to visit us on Twitter"></a>
        <a href="http://pinterest.com/print3dexpert" target="blank"><img src="img/pinterest.png" alt="Click to visit us on Pininterest"></a>
        <a href="#"><img src="img/email.png" title="Click to contact us" alt="Contact us"></a>
    
        <nav class="topmenu omega">
            <ul>
                <li><a href="#">Home</a> |</li>
                <li><a href="#">About Us</a> |</li>
                <li><a href="#">Cheeses</a></li>
            </ul>
        </nav>
    </div>

    CSS

    #social_icons {
        padding: .5em;
        line-height: 2.7;
        -webkit-columns: 150px 2;
        font-size: 1.2em;
    }
    
    .topmenu li { 
        display:inline-block;
    }

Dejar respuesta

Please enter your comment!
Please enter your name here