Nueva pregunta

Pregunta:

 
  3  
 
 
Qué Código Karma: 2708 Colombia
 
 Fecha: 14-01-2016 18:30:02 (En Español)

Centrar objetos al 100%[Resuelta]

Hola amigos,
Hoy quisiera saber cómo puedo centrar tres objetos pero que me ocupen el 100% del elemento padre que en este caso sería un <ul> y los elementos hijos un <li> que llevaría por dentro un <i> que sería un icono y un número coreespondiente al caso.
La idea es hacerlo más o menos como lo tiene Facebook.

Salu2 y gracias Etiquetas: Concepto - CSS - CSS3 - Mejores Prácticas - Opinión - Pregunta - Responsive Web Design - Sugerencia Votos: 3 - Respuestas: 3 - Vistas: 16 Compartir en: Google Facebook Twitter LinkedIn Link
 

Respuestas:

  •  
      3  
     
     
    Juan Quinto Karma: 2761 Perú
     
    Fecha: 15-01-2016 05:28:26 Hola edison ojala te sirva expongo codigo

    html

    <!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="css.css">
</head>
<body>
	<ul class="menu"> 
<li class="active"><i></i>Me gusta</li>
<li><i></i>Comentar</li>
<li><i></i>Compartir</li>
</ul>
</body>
</html>


    css

    
body{
	font-family: "century gothic"
}

.menu{
  float: left;
  width: 100%;
  height: auto;
  padding: 0px;
  margin: 0px;
  border-top: 1px solid #666;
  border-bottom: 20px solid #D3D6DB
}

.menu li{
	float: left;
	width: auto;
	height: auto;
	padding: 15px 10px;
	color: #222;
	list-style: none;
	cursor: pointer;
	font-size: 16px
}

.active{
	color: #5891F8 !important
}

.menu li:hover{
	color: #5891F8 
}



    saludos       Votos: 3 - Link respuesta
     
  •  
      1  
     
     
    Edwin Marroquin Karma: 731 Colombia
     
    Fecha: 18-01-2016 16:05:20 Aca hice un ejemplo no se si se le ajuste a lo que necesita
    Ejemplo en vivo

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<ul>
	<li>
		<a href="#">
			<i class="fa fa-2x fa-thumbs-o-up"></i> Me gusta
		</a>
	</li>
	<li>
		<a href="#">
			<i class="fa fa-2x fa-comment"></i> Comentar
		</a>
	</li>
	<li>
		<a href="#">
			<i class="fa fa-2x fa-share"></i> Compartir
		</a>
	</li>
</ul>


    ul{
	font-family:Verdana;
	list-style:none;
	padding: 0;
	margin: 2rem 0;
	display:flex;
	flex:2;
	justify-content:space-around;
	width:100%;
}

ul li {
	width:100%;
	text-align: center;
	border-top:2px solid gainsboro;
	padding:1rem 0;
}

ul li a {
	color:steelblue;
	display:inline-flex;
	align-items:center;
	text-decoration:none;
	font-size:20px;
}

ul li:hover a{
	color:teal;
}
ul li a i {
	padding:0 .5rem;
}
       Votos: 1 - Link respuesta
     
  •  
      0  
     
     
    Qué Código Karma: 2708 Colombia
     
    Fecha: 18-01-2016 16:46:25 Gracias a los dos por sus aportes aunque lo sulucine de otra forma que prono lo aportare.
    Ps no sé si sea la manera correcta.       Votos: 0 - Link respuesta
     
Para participar activamente de la comunidad primero debes autenticarte, ingresa al sistema.Iniciar Sesión
 
frjcbbae garagebible.com