0

    <nav class="navbar navbar-static-top white-bg" role="navigation" style="margin-bottom: 0">

              <ul class="nav navbar-top-links navbar-right">

            <div class="row border-bottom" style="margin-bottom: 0; background: #ffffff; padding: 0px;">
            <nav class="navbar navbar-static-top" role="navigation" style="margin-bottom: 0; height:25px; background: transparent;">
              <div class="dropdown profile-element">
                <img alt="image" class="img-circle" src="http://localhost/Warehouse/assets/img/profiles/john.jpg" />
               </div>

              <li>
                 <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                 <span class="clear"> <span class="block m-t-xs"> <strong class="font-bold">David Williams</strong>
                  </span> <span class="text-muted text-xs block">Art Director <b class="caret"></b></span> </span> </a>
                 <ul class="dropdown-menu animated fadeInRight m-t-xs">
                     <li><a href="login.html">Logout</a></li>
                 </ul>
              </li>
            </nav>

            </ul>
          </nav>

Asi es como se mira:

introducir la descripción de la imagen aquí

Quisiera que se mirara en una sola fila es decir, la foto de perfil y luego el nombre, al dar clic sale la opcion de logout, no se como acomodarlo.

1 respuesta 1

1

Puedes agregar display: inline-block; a los elementos que desees que esten en linea. Algo asi:

img {  
  height: 50px;
  width: 50px;
}

.profile-element, li {
  display: inline-block;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

<nav class="navbar navbar-static-top white-bg" role="navigation" style="margin-bottom: 0">

              <ul class="nav navbar-top-links navbar-right">

            <div class="row border-bottom" style="margin-bottom: 0; background: #ffffff; padding: 0px;">
              <!-- <img src="http://localhost/Warehouse/assets/img/Esterline.png"></img> -->
            <nav class="navbar navbar-static-top" role="navigation" style="margin-bottom: 0; height:25px; background: transparent;">
              <div class="dropdown profile-element">
                <img alt="image" class="img-circle" src="https://picsum.photos/200/300/?random" />
               </div>

              <li>
                 <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                 <span class="clear"> <span class="block m-t-xs"> <strong class="font-bold">David Williams</strong>
                  </span> <span class="text-muted text-xs block">Art Director <b class="caret"></b></span> </span> </a>
                 <ul class="dropdown-menu animated fadeInRight m-t-xs">
                     <li><a href="login.html">Logout</a></li>
                 </ul>
              </li>
            </nav>

            </ul>
          </nav>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.