HTML домашно Problem 2. Nested Lists


0

Здравейте,

Някой може ли да ми обясни как мога да направя така, че там, където пише List Item 1 и List Item 2, текстът да е на съответното разстояние от римските цифри I и II и да започва от там, от където започват а. Nested item 1.1, b Nested Item 1.2 и 1. Nested Item 2.1, 2. Nested Item 2.2, а не както при мен, да са е залепен до римските цифри и да е по наън.

Не съм сигурен, че го обясних много разбираемео :D но като цяло искам да изглежда както от примера в домашното тук https://github.com/TelerikAcademy/HTML/blob/master/Topics/02.%20HTML-Fundamentals/homework/README.md - ето го и кода

<!DOCTYPE html> <html> <head></head> <body> Preceding Text <ol type="I"> <li>List Item 1</li> <ol type="a"> <li>Nested Item 1.1</li> <li>Nested Item 1.2</li> </ol> <li>List Item 2</li> <ol type="1"> <li>Nested Item 2.1</li> <li>Nested Item 2.2</li> <ul type="circle"> <li>Nested Item 2.2.1</li> <li>Nested Item 2.2.2</li> <ul type="square"> <li>Nested Item 2.2.2.1</li> <li>Nested Item 2.2.2.2</li> </ul> <li>Nested Item 2.2.3</li> </ul> <li>Nested Item 2.3</li> </ol> <li>List Item 3</li> <ul type="disc"> <li>Nested Item 3.1</li> <li>Nested Item 3.1</li> <li>Nested Item 3.1</li> </ul> </ol> </body> </html>




Отговори



1

Можеш да постигнеш резултата, който търсиш със css. Трябва да сложиш "padding" в отварящия таг на nested list-a. По default padding-a е 40px.

 

Вкарах padding в твоя код, за да видип как става това с първия nested list (Nested Item 1.1)

<!DOCTYPE html> <html> <head></head> <body> Preceding Text <ol type="I"> <li>List Item 1</li> <ol type="a" style="padding-left: 15px;"> <li>Nested Item 1.1</li> <li>Nested Item 1.2</li> </ol> <li>List Item 2</li> <ol type="1"> <li>Nested Item 2.1</li> <li>Nested Item 2.2</li> <ul type="circle"> <li>Nested Item 2.2.1</li> <li>Nested Item 2.2.2</li> <ul type="square"> <li>Nested Item 2.2.2.1</li> <li>Nested Item 2.2.2.2</li> </ul> <li>Nested Item 2.2.3</li> </ul> <li>Nested Item 2.3</li> </ol> <li>List Item 3</li> <ul type="disc"> <li>Nested Item 3.1</li> <li>Nested Item 3.1</li> <li>Nested Item 3.1</li> </ul> </ol> </body> </html>

Трябва да кажа, че вкарването на css в html tag-ове не е никак добра идея, но горния пример е просто ...прост пример :D


от Kalin_Kostov (360 точки)


0
Моето решение е без padding:

<!DOCTYPE html> <html> <head> <title>The runners Home!</title> </head> <body> <p>Preceding Text</p> <div> <ol type="I"> <li>List Item 1</li> <ol type="a"> <li>Nested Item 1.1</li> <li>Nested Item 1.2</li> </ol> <li>List Item 2</li> <ol> <li>Nested Item 2.1</li> <li>Nested Item 2.2</li> <ul type="circle"> <li>Nested Item 2.2.1</li> <li>Nested Item 2.2.2</li> <ul type="square"> <li>Nested Item 2.2.2.1</li> <li>Nested Item 2.2.2.2</li> </ul> <li>Nested Item 2.2.3</li> </ul> <li>Nested Item 2.3</li> </ol> <li>List Item 3</li> <ul type="disc"> <li>Nested Item 3.1</li> <li>Nested Item 3.1</li> <li>Nested Item 3.1</li> </ul> </ol> </div> </body> </html>

от debsbg (5 точки)

0

@Kalin_Kostov Аха.... разбирам. А в такъв случай, кое е по добре, да се ОПИТАМ да вкарам css в html-a, за да направя домашното такова, каквото трябва да е, въпреки, че това е лоша практика, а и въпреки че никога преди това не съм използвал css и не ни е бил преподаван или да го направя максимално идентично с домашното, според възможностите на html, което всъщност ни е настоящия курс и съответното домашно цели да провери какво можем с html, а не с css?

Благодаря ти за коментара все пак! И да попитам - някакви други забележки по кода ми, които аз не съм забелязал?



@debsbg - 

Ами като визулен резултат не виждам кой знае колко разлики с моето, и при теб итеми №1, 1.1, 1.2, 2, 2.1, 2.2 не са подредени едно под друго точно както е в примера от домашното. 

Но както и да е, аз имам няколко въпроса към теб. 

1. Има ли някаква причина Preceding Text да е в <p></p> и

2. Каква е ролята на <div></div> в случая

И накрая, нещо, което може би си пропуснала, но заглавието в head-a ти е от миналата задача ;)

Мерси за отговора все пак!