Hola
PatomaS, gracias por contestar:
Cita:
Iniciado por PatomaS 
Veamos, si agregas un borde a la lista, verás que firefox tampoco te lo muestra realmente bien ya que los elementos con float están fuera de la lista.
Eso me ocurre también en IE (6), los elementos flotantes no ocupan lugar porque flotan ¿no? Jeje. Siempre ha sido un problema, pero ¿Influye eso en mi cuestión?
Cita:
Iniciado por PatomaS Si lo que quieres es que estén en la misma línea, lo que has de hacer es cambiar su tipo de display, de block a inline.
(...)
Obviamente, al ser inline, todos irán a la misma línea, po lo que debes controlar las dimensiones del formulario para que salten cuando sea necesario.
¿Cómo puedo hacer eso? Tengo los dos primeros elementos, que me impiden acortar el width de la lista. De todas maneras ¿cómo lo acorto? ¿Con porcentaje? ¿Con píxeles? ¿Con em? Dependiendo de cómo tenga el usuario el tamaño de letra en su navegador, cambiarán el número de elementos por fila haga lo que haga...
(Ver editado al final) Cita:
Iniciado por PatomaS En cualquier caso, si lo que te interesa es realmente la semántica, si los tres elementos deben estar en la misma línea, significa que son la misma opción, por lo que deberían ser un solo elemento de lista.
Sí, quizás me has pillado ahí, jeje. No habría problema en que fueran el mismo elemento la misma línea. Es para el menú principal de una web. Interpreto esta lista como un tablero de 3x3, como si fuera un tres en raya. También pueden hacerse listas que no formen una línea ¿no? Sino un tablero, o "nube". Una lista multi-columna o multi-fila (para muchos elementos). La cuestión es cómo hacerla controlando cuántos elementos por fila.
Se me ha ocurrido meter elementos de separación, que "rompan" ese inline. Pero claro, tengo que meter más elementos HTML sin sentido:
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" xml:lang="es" lang="es">
<head>
<meta http-equiv="Content-type" content="text/html;charset=iso-8859-1" />
<meta name="Author" content="derkeNuke" />
<title>Página nueva</title>
<style type="text/css">
#lista {
list-style:none;
}
#lista .junto {
display: inline;
}
#lista .separador {
display: block;
line-height: 1px;
}
</style>
</head>
<body>
<ul id="lista">
<li>especial #1</li>
<li>especial #2</li>
<li class="junto">#1</li>
<li class="junto">#2</li>
<li class="junto">#3</li>
<li class="separador"> </li>
<li class="junto">#4</li>
<li class="junto">#5</li>
<li class="junto">#6</li>
<li class="separador"> </li>
<li class="junto">#7</li>
<li class="junto">#8</li>
<li class="junto">#9</li>
</ul>
</body>
</html>
¿Alguna idea de cómo hacerlo sin trucos HTML?
EDITO: Me he dado cuenta que sí podemos dar una anchura a la lista con la unidad
em sin que al redimensionar la letra del navegador se descoloque la lista (aumenta en consecuencia la anchura de la lista). ¿Me puedo fiar dimensionándola con mi ordenador? Además, tendría que hacer dos listas, una para los elementos del principio y otra para el tablero 3x3, aunque no supone problema.
