#html #css
#HTML #CSS
Вопрос:
Чего я хочу добиться, так это сделать a текст тега, чтобы начать новую строку под ним, а не под номерами
ul.myul { counter-reset: li; } ul.myul li { counter-increment: li; list-style: none; margin-bottom: 10px; } ul.myul li a::before { content: "0" counter(li); font-size: 22px; font-family: 'poppinsbold'; color: red; margin-right: 10px; } lt;div style="width:400px"gt; lt;ul class="myul"gt; lt;ligt;lt;agt;lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsumlt;/agt;lt;/ligt; lt;ligt;lt;agt;lorem ipsum loremlt;/agt;lt;/ligt; lt;/ulgt; lt;/divgt; Это то, что я на самом деле хочу, это должно идти на новую линию после красной линии, а не за красной линией:
ul.myul { counter-reset: li; } ul.myul li { counter-increment: li; list-style: none; margin-bottom: 10px; } ul.myul li a::before { content: "0" counter(li); font-size: 22px; font-family: 'poppinsbold'; color: red; margin-right: 10px; } .myul::after { content: ""; width: 2px; height: 100%; background: red; position: absolute; top: 0; left: 78px; } lt;div style="width:400px"gt; lt;ul class="myul"gt; lt;ligt;lt;agt;lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsumlt;/agt;lt;/ligt; lt;ligt;lt;agt;lorem ipsum loremlt;/agt;lt;/ligt; lt;/ulgt; lt;/divgt; Комментарии:
1. Обман на самом деле не отвечает на этот конкретный вопрос.
2. Я предполагаю, что вы хотите, чтобы вторая строка, начинающаяся с ipsum, находилась под заголовком первой строки, верно?
Ответ №1:
@CBroe уже правильно упомянул об этом в комментарии. Список свойств ul CSS-стиль-позиция: снаружи; — это правильный путь сюда.
ul.myul { counter-reset: li; } ul.myul li { counter-increment: li; list-style: none; margin-bottom: 10px; padding-left: 50px; list-style-position: outside; position: relative; } ul.myul li::before { content: "0" counter(li) "."; font-size: 22px; font-family: 'poppinsbold'; color: red; left: 0; position: absolute; top: 0; } .myul::after { content: ""; width: 2px; height: 100%; background: red; position: absolute; top: 0; left: 86px; } lt;div style="width:400px"gt; lt;ul class="myul"gt; lt;ligt;lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsumlt;/ligt; lt;ligt;lt;agt;lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsumlt;/agt;lt;/ligt; lt;ligt;lt;agt;lorem ipsum loremlt;/agt;lt;/ligt; lt;/ulgt; lt;/divgt; Комментарии:
1. Внутри или снаружи? Вы говорите «снаружи», но используете внутри…. И, похоже, именно обивка слева делает тяжелую работу