3

Tento alinhar uma font ico no lado direito da tela dentro de um cabeçalho HEADER, porém não consigo até uso um float: right. Mas, ai ele vai para a direita, contudo perco as outras definições de alinhamento. Quero mandar essas três barras pra lateral direita. Imagem abaixo:

inserir a descrição da imagem aqui

Esse é meu html:

<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test Font</title>
<!-- Link para Icon Fontes Externos -->
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
    <header>
        <i class="fa fa-search"></i>
        <h1 class="logo">Sample Sample</h1>
        <i class="fa fa-bars"></i>
    </header>
</body>
</html>

Esse é meu CSS:

   *{padding: 0; 
      margin: 0;
      }

    body{
        font-family: arial, helvetica, freesans, sans-serif;
        font-style: normal;
    }

    header{
        height: 70px;
        line-height: 70px;
        background: #674323;
        color: white;
        font-size: 1.3em;
    }

    header .logo{
        text-align: center;
        display: inline-block;
        margin: 0 auto;
        text-shadow: 1px 1px 1px black;
    }

    .fa-search{
        font-size: 1.58em;
        text-align: left;
        margin-left: 20px;

    }

    .fa-bars{
        display: inline-block;
        font-size: 1.8em;
        text-align: right;
        margin-right: 20px;
        border-radius: 10px;
        background: white;
        color: #674323;
        padding: 2px 5px 1px 5px;
        box-size: border-box;
        vertical-align: middle;
    }
1

2 Respostas 2

4

Uma possibilidade é fazer esse icon ter posição defenida, ou seja com position: absolute;

Para isso bastaria usar este CSS:

 .fa-bars {
     position: absolute;
     right: 20px;
     top: 15px;

Para ter este efeito: http://jsfiddle.net/2H3Lc/

2

inserir a descrição da imagem aqui

Caso seja dessa forma que você queira exibir basta dar um float: right e um margin: 15px 40px 0 0 (o espaçamento do margin fica a seu critério).

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .