Autor Tema: Listas HTML. Listas no ordenadas,ordenadas, de definiciones. Tag li. CU00718B (Leído 2915 veces)

LuisM · « **en:** 27 de Septiembre 2017, 20:29 »

Hola a todos !! Dejo el código del ejercicio propuesto CU00718B del tutorial de programación HTML en pdf. Desde ya muchas gracias.

Saludos, Luis

EJERCICIO
Crea una lista ordenada cuyos elementos sean Doctores, Ayudantes y Auxiliares. Dentro de Doctores define una lista no ordenada cuyos elementos sean: Juana Pérez, Alberto Márquez, Raúl Moreno. Dentro de Ayudantes define una lista no ordenada cuyos elementos sean: Noelia Suárez, Abel Rebollo. Dentro de Auxiliares crea una lista no ordenada cuyos elementos sean Silvia Estévez, Angela González y Cuarthemoc Adanez. Separa cada lista con un elemento hr de color azul, 10 pixeles de grosor y que ocupe el 50% del ancho disponible.

Código: [Seleccionar]

<!DOCTYPE html>
<html>
    <head>       
        <meta charset="utf-8">
        <title>Ejemplo del uso de listas - aprenderaprogramar.com</title>
    </head>
<body>

<ol>
<li> Doctores </li>
	<ul style="list-style-type:disc">
	<li> Juana Pérez </li>
	<li> Alberto Márquez </li>
	<li> Raúl Moreno </li>
	</ul>
<hr style="height:10px; background-color: blue; width:50%;" />
<li> Ayudantes </li>
	<ul style="list-style-type:circle">
	<li> Noelia Suárez </li>
	<li> Abel Rebollo </li>
	</ul>
<hr style="height:10px; background-color: blue; width:50%;" />	
<li> Auxiliares </li>	
	<ul style="list-style-type:square">
	<li> Silvia Estévez </li>
	<li> Angela González </li>
	<li> Cuarthemoc Adanez </li>
	</ul>
</ol>
</body>
</html>

KOFFERO · « **Respuesta #1 en:** 28 de Septiembre 2017, 21:36 »

Hola LuisM, tu ejercicio esta bien, pero tus lineas separadores "hr" estan centrada:

para anular el margen que hay en la parte izquierda, pon este código en tu estilos css del hr: margin-left: 0;.
Quedariá de la siguiente manera:

Código: [Seleccionar]

<hr style="height:10px; background-color: blue; width:50%; margin-left: 0;" />

Y con eso la linea se pone bien en la parte izquierda:

Un saludo.

LuisM · « **Respuesta #2 en:** 02 de Octubre 2017, 14:00 »

Muchísimas gracias Jorge !!!

Ya lo cambié y quedó mejor.

Código: [Seleccionar]

<!DOCTYPE html>
<html>
    <head>       
        <meta charset="utf-8">
        <title>Ejemplo del uso de listas - aprenderaprogramar.com</title>
    </head>
<body>

<ol>
<li> Doctores </li>
	<ul style="list-style-type:disc">
	<li> Juana Pérez </li>
	<li> Alberto Márquez </li>
	<li> Raúl Moreno </li>
	</ul>
<hr style="height:10px; background-color: blue; width:50%; margin-left:0" />
<li> Ayudantes </li>
	<ul style="list-style-type:circle">
	<li> Noelia Suárez </li>
	<li> Abel Rebollo </li>
	</ul>
<hr style="height:10px; background-color: blue; width:50%; margin-left:0" />	
<li> Auxiliares </li>	
	<ul style="list-style-type:square">
	<li> Silvia Estévez </li>
	<li> Angela González </li>
	<li> Cuarthemoc Adanez </li>
	</ul>
</ol>
</body>
</html>

Foros aprenderaprogramar.com
Didáctica y divulgación de la programación

Noticias: