alineacion de un div

LABANDADELOSO · #1 (**permalink**) 01/05/2013, 12:53

Hola muchachos, estoy haciendo un menu de navegacion, el cual deseo que el icono se encuentre en un extremo de la tabla, y la palabra a linkear que se encuentre en el otro extremo de la tabla, lo que sucede es que no se me ocurre como hacerlo sin perder el efecto del css ...

Código HTML:

<div class="container-fluid row">
         <ul class="nav nav-tabs nav-stacked">
          <li class="active" style="text-align:left"><a href="#"><i class="icon-home"></i>Home</a></li>
          <li ><a href="#">Home</a></li>
          <li ><a href="#">Home</a></li>
          <li ><a href="#">Home</a></li>
          <li ><a href="#">Home</a></li>
          <li ><a href="#">Home</a></li>
        </ul>
         </div>

Ojala alguien me pueda ayudar... saludos

emprear · #2 (**permalink**) 01/05/2013, 13:39

Tu ejemplo esta medio incompleto porque no señalás los anchos del menu de navegación y icon-home no tiene ningun contenido, pero sería algo asi, supongo

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<style type="text/css">
/*<![CDATA[*/
ul.nav{
width: 80%;
margin: 0;
padding: 0;
}
.active a {
display: inline-block;
position: relative;
text-align: right;
width: 100%;
} 
.icon-home{
float: left;
}

/*]]>*/
</style>
</head>
<body>
<div class="container-fluid row">
         <ul class="nav nav-tabs nav-stacked">
          <li class="active" style="text-align:left"><a href="#"><i class="icon-home">X</i>Home</a></li>
          <li ><a href="#">Home</a></li>
          <li ><a href="#">Home</a></li>
          <li ><a href="#">Home</a></li>
          <li ><a href="#">Home</a></li>
          <li ><a href="#">Home</a></li>
        </ul>
         </div> 
</body>
</html>

Saludos

alberto510a · #3 (**permalink**) 01/05/2013, 15:48

Prueba a usar la propiedad float de CSS sirve para que los elementos de coloquen unos al lado de otros.
Si no sabes usarla busca en Google la explican bien.