Pantalla: en línea no funciona

Soy bastante nuevo en html y css.Pantalla: en línea no funciona

Aprendí los conceptos básicos y algunas técnicas avanzadas, pero he estado teniendo problemas con las listas desde hace mucho tiempo y me gustaría saber cómo podría solucionar mi problema.

Aquí está la idea.

Estoy haciendo una tienda en línea, pero quiero evitar el posicionamiento de cada imagen, texto o enlace utilizando una identificación diferente.

Tuve esta idea, pondría mi li dentro de un div así que, todo dentro de mi lista quedaría atrapado dentro de esta caja, hacer una clase posicionando mi texto, enlaces, imágenes correctamente, usar pantalla: en línea y et voila, puedo crear una página completa de productos usando solo una clase.

El problema es la visualización: en línea no está funcionando.

Realmente agradecería que alguien me pudiera ayudar en esto.

Este es un mal ejemplo, pero usted comprende el principio.

<!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> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<style type="text/css"> 
    #nav_bar {margin:0px;padding:0px;list-style-type:none;text-align:center;} 
    .nav_button {background-color:purple;width:100px;height:50px;} 
    .nav_button:hover {background-color:pink;} 
    .nav_button li {display:inline;} /* Not working ?!? */ 
    .nav_button a {position:relative;color:white;text-decoration:none;top:13px;} 
</style> 
</head> 

<body> 
    <table style="width:600px;margin:0 auto;"> 
     <tr> 
      <td> 
       <ul id="nav_bar"> 
        <div class="nav_button"> <li> <a href="#">Home</a> </li> </div> 
        <div class="nav_button"> <li> <a href="#">Contact us</a> </li> </div> 
        <div class="nav_button"> <li> <a href="#">Shipping</a> </li> </div> 
        <div class="nav_button"> <li> <a href="#">About us</a> </li> </div> 
       </ul> 
      </td> 
     </tr> 
    </table> 
</body> 
</html>

Fuente

2012-08-15 Dany

display:inline es muy limitada y no permite que ningún a nivel de bloque estilo de añade a la misma. Es mejor utilizar display:inline-block o usar float:left. Tenga en cuenta que si usa flotantes, debe configurar el desbordamiento del elemento principal en overflow:auto (uso visible para IE < 8) y esto debería funcionar. Use en línea el bloque primero.

Fuente

2012-08-15 03:35:43 matsko

Funciona, .nav_button li {} no era necesario, todo lo que tenía que hacer era usar float: left inside .nav_button. Dulce, mi idea funcionó después de todo – Dany

La razón por la que no funciona es porque lo está usando dentro de un div y ese elemento div tiene solo un elemento li, la propiedad en línea funcionaría si tiene más de un elemento li bajo un div.

probar este

<ul id="nav_bar"> 
    <li class="nav_button"> <a href="#">Home</a> </li> 
    <li class="nav_button"> <a href="#">Contact us</a> </li> 
    <li class="nav_button"> <a href="#">Shipping</a> </li> 
    <li class="nav_button" > <a href="#">About us</a> </li> 
</ul>

y css

#nav_bar .nav_button {display:inline-block;}

o, alternativamente, se puede también utilizar:

#nav_bar .nav_button {float:left;width:40px;}/*you will need to specify the width*/

si se utiliza el método float asegurarse de que está utilizando un elemento especificado con clear:both; al final.

Fuente

2012-08-15 03:37:18 Amyth

nota de que: si el ancho elemento padre es demasiado corto para mostrar horizantally continuación

ul { 
width: 20px; 
} 
li 
{ 
display: inline; 
}

no funcionará.

también bajo el elemento li si tiene pantalla: bloque; declaración como

li 
{ 
display: inline; 
} 
li a{ 
display: block; 
}

no funciona.

Fuente

2016-11-04 17:25:51 Emre

Pantalla: en línea no funciona

Respuesta

Cuestiones relacionadas