Некорректно отображаются цифры в строке
Верстаю блок имитирующий страницу с кодом. Не получается адекватно пронумировать строки, цифры со значением больше 9 начинают пододвигать соседние блоки вправо. На скрине ниже пример того как должно быть, и то что получается у меня. Подскажите пожалуйста как лучше решить данную проблему.
Мой код:
HTML
<div class="practite2__question2">
<div class="practite2__question2-title">
Вопрос 2
</div>
<p class="practite2__question2-text">
Что выведет в консоли следующий код:
</p>
<div class="practite2__question2-task">
<div class="practite2__question2-block">
<div class="practite2__num2">1</div>
<div class="practite2__num2-text2">
<span> <span class="practite2__num2-red">using</span> Microsoft.AspNetCore.Builder;</span>
</div>
</div>
<div class="practite2__question2-block">
<div class="practite2__num2">2</div>
<div class="practite2__num2-text2">
<span> <span class="practite2__num2-red">using</span> Microsoft.AspNetCore.Hosting;</span>
</div>
</div>
<div class="practite2__question2-block">
<div class="practite2__num2">3</div>
<div class="practite2__num2-text2">
<span> <span class="practite2__num2-red">using</span> Microsoft.Extensions.Configuration;
</span>
</div>
</div>
<div class="practite2__question2-block">
<div class="practite2__num2">4</div>
<div class="practite2__num2-text2">
<span> <span class="practite2__num2-red">using</span> Microsoft.Extensions.DependencyInjection;
</span>
</div>
</div>
<div class="practite2__question2-block">
<div class="practite2__num2">5</div>
<div class="practite2__num2-text2">
<span> <span class="practite2__num2-red">using</span> Microsoft.Extensions.Hosting;
</span>
</div>
</div>
<div class="practite2__question2-block">
<div class="practite2__num2">6</div>
<div class="practite2__num2-text2">
<span> <span class="practite2__num2-red"></span> </span>
</div>
</div>
<div class="practite2__question2-block">
<div class="practite2__num2">7</div>
<div class="practite2__num2-text2">
<span> <span class="practite2__num2-red">namespace</span> CacheExamples</span>
</div>
</div>
<div class="practite2__question2-block">
<div class="practite2__num2">8</div>
<div class="practite2__num2-text2">
<span> <span class="practite2__num2-red">
</span> </span>
</div>
{
</div>
<div class="practite2__question2-block">
<div class="practite2__num2">9</div>
<div class="practite2__num2-text2">
<span> <span class="practite2__num2-red">public class</span> Startup</span>
</div>
</div>
<div class="practite2__question2-block">
<div class="practite2__num2">10</div>
<div class="practite2__num2-text2">
<span> <span class="practite2__num2-red"></span> {
</span>
</div>
</div>
</div>
</div>
CSS
.practite2__block-text{
color: rgba(96, 98, 104, 1);
font-family: 'Segoe UI';
font-weight: 700;
font-size: 20px;
line-height: 20px;
margin-bottom: 10px;
}
.practite2__block-title{
font-family: 'Bitter';
font-weight: 700;
font-size: 40px;
line-height: 50px;
letter-spacing: 1px;
color: rgba(35, 38, 45, 1);
margin-bottom: 60px;
max-width: 735px;
}
.practite2__block-main{
display: flex;
}
.practite2__block-title-count{
font-family: 'Bitter';
font-weight: 900;
font-size: 80px;
line-height: 96px;
color: rgba(196, 202, 207, 1);
position: relative;
bottom: 25px;
}
.practite2__question1-title,
.practite2__question2-title{
font-family: 'Bitter';
font-weight: 700;
font-size: 30px;
line-height: 36px;
color: rgba(35, 38, 45, 1);
}
.practite2__question1-text,
.practite2__question2-text{
font-family: 'Segoe UI';
font-weight: 400;
font-size: 18px;
line-height: 28px;
letter-spacing: -1px;
margin-bottom: 20px;
}
.practite2__question1-task{
max-width: 915px;
border-radius: 8px;
border: 2px solid rgba(226, 231, 235, 1);
margin-bottom: 30px;
background: rgba(247, 248, 250, 1);
}
.practite2__num,
.practite2__num2{
font-family: 'Consolas';
font-weight: 400;
font-size: 14px;
line-height: 24px;
letter-spacing: -1px;
font-weight: 400;
color: rgba(160, 161, 166, 1);
margin-left: 25px;
padding-right: 10px;
border-right: 2px solid rgba(117, 182, 135, 1);
}
.practite2__num-text,
.practite2__num2-text2{
font-family: 'Consolas';
font-weight: 400;
font-size: 14px;
line-height: 24px;
color: rgba(35, 38, 45, 1);
margin-left: 10px;
}
.practite2__question1-block,
.practite2__question2-block{
display: flex;
}
.practite2__num2-red,
.practite2__question1-red{
color: rgba(227, 111, 89, 1);
}
.practite2__question1-blue {
color: rgba(0, 163, 255, 1);
}
.practite2__question1-answer{
padding: 17px 20px 25px;
max-width: 915px;
border: 2px solid rgba(226, 231, 235, 1);
border-radius: 8px;
margin-bottom: 80px;
}
.practite2__question1-anwser-title{
font-family: 'Bitter';
font-weight: 700;
font-size: 18px;
line-height: 18px;
color: rgba(35, 38, 45, 1);
margin-bottom: 15px;
}
.practite2__question1-answer-text{
font-family: 'Segoe UI';
font-weight: 400;
font-size: 16px;
line-height: 26px;
max-width: 875px;
padding-top: 14px;
border-top: 1px solid rgba(226, 231, 235, 1);
}
https://codepen.io/Den323/pen/gOeQYLr
Ответы (1 шт):
Автор решения: Олег
→ Ссылка
.practite2__block-text{
color: rgba(96, 98, 104, 1);
font-family: 'Segoe UI';
font-weight: 700;
font-size: 20px;
line-height: 20px;
margin-bottom: 10px;
}
.practite2__block-title{
font-family: 'Bitter';
font-weight: 700;
font-size: 40px;
line-height: 50px;
letter-spacing: 1px;
color: rgba(35, 38, 45, 1);
margin-bottom: 60px;
max-width: 735px;
}
.practite2__block-main{
display: flex;
}
.practite2__block-title-count{
font-family: 'Bitter';
font-weight: 900;
font-size: 80px;
line-height: 96px;
color: rgba(196, 202, 207, 1);
position: relative;
bottom: 25px;
}
.practite2__question1-title,
.practite2__question2-title{
font-family: 'Bitter';
font-weight: 700;
font-size: 30px;
line-height: 36px;
color: rgba(35, 38, 45, 1);
}
.practite2__question1-text,
.practite2__question2-text{
font-family: 'Segoe UI';
font-weight: 400;
font-size: 18px;
line-height: 28px;
letter-spacing: -1px;
margin-bottom: 20px;
}
.practite2__question1-task{
max-width: 915px;
border-radius: 8px;
border: 2px solid rgba(226, 231, 235, 1);
margin-bottom: 30px;
background: rgba(247, 248, 250, 1);
}
.practite2__num,
.practite2__num2{
font-family: 'Consolas';
font-weight: 400;
font-size: 14px;
line-height: 24px;
letter-spacing: -1px;
font-weight: 400;
color: rgba(160, 161, 166, 1);
margin-left: 25px;
padding-right: 10px;
border-right: 2px solid rgba(117, 182, 135, 1);
position: absolute;
width: 20px;
text-align: right;
left: 0;
transform: translateX(-100%);
}
.practite2__num-text,
.practite2__num2-text2{
font-family: 'Consolas';
font-weight: 400;
font-size: 14px;
line-height: 24px;
color: rgba(35, 38, 45, 1);
padding-left: 35px;
}
.practite2__num-text::after,
.practite2__num2-text2::after{
content: ' ';
}
.practite2__question1-block,
.practite2__question2-block{
display: flex;
position: relative;
}
.practite2__num2-red,
.practite2__question1-red{
color: rgba(227, 111, 89, 1);
}
.practite2__question1-blue {
color: rgba(0, 163, 255, 1);
}
.practite2__question1-answer{
padding: 17px 20px 25px;
max-width: 915px;
border: 2px solid rgba(226, 231, 235, 1);
border-radius: 8px;
margin-bottom: 80px;
}
.practite2__question1-anwser-title{
font-family: 'Bitter';
font-weight: 700;
font-size: 18px;
line-height: 18px;
color: rgba(35, 38, 45, 1);
margin-bottom: 15px;
}
.practite2__question1-answer-text{
font-family: 'Segoe UI';
font-weight: 400;
font-size: 16px;
line-height: 26px;
max-width: 875px;
padding-top: 14px;
border-top: 1px solid rgba(226, 231, 235, 1);
}
Можно позиционировать абсолютно и сместить влево, а можно задать фиксированную ширину, например. 25-30px

