Вёрстка строки из блоков в виде окружности

@Kucc · Регистрация: 21.06.2013

Студворк — интернет-сервис помощи студентам

Мне нужны такие круги, внутри которых будет текст, вот один из них:

Вёрстка строки из блоков в виде окружности

Как видите, там текст, мне нужно его расположить в центре, причем цифра и текст ниже это разные элементы, как только я начинаю писать padding, кольцо это начинает увеличиваться, после этого мне приходится менять ширину и высоту, это очень неудобно, нудно и затратно по времени, что я делаю не так? Вот код :

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
    <div id="grow">
        <div id="project">
                <ul>
                    <li>1</li>
                    <li>PROJECT</li>
                </ul>
        </div>
        <div id="client">
                <ul>
                    <li>0</li>
                    <li>CLIENTS</li>
                </ul>
        </div>
        <div id="months">
                <ul>
                    <li>6</li>
                    <li>MONTHS</li>
                </ul>
        </div>
            <!-- <ul>
                <li class="about-1">ПРО ПРОЕКТ</li>
                <li class="about-2">ПРО КЛИЕНТОВ</li>
                <li class="about-3">ПРО МЕСЯЦА</li>
            </ul> -->
    </div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
#grow {
    display: inline-block; 
    height: 450px;
    width: 99.8%;
    border: 1px solid yellow;
}
 #grow li{
    list-style: none;
}
#project, #client, #months ul {
    border: 1px solid red;
    border-radius: 100%;
    width: 220px;
    height: 220px;
}
//если в три нижних id начать писать отступ, то радиус будет увеличиваться
#project{
    margin-left: 285px;
    margin-top: 50px;
}
#client{
    margin-left: 684px;
}
#months{
    margin-left: 580px;
}
#project li:first-child, #client li:first-child, #months li:first-child {
    font-size: 60px;
}
#project li:last-child, #client li:last-child, #months li:last-child {
    font-size: 16px;
}

Позиционирование самих листов пока не важно, я там разберусь, мне бы понять именно как писать отступы правильно:

Добавлено через 13 минут
И вот еще с чем столкнулся, тут у меня догадок нет, из-за чего так произошло? Код выше, все идентично, чего третье кольцо сплюснутое?

Решение додумал сам, как всегда, не туда писал...

CSS
1
2
3
4
5
6
7
8
9
#project li:first-child, #client li:first-child, #months li:first-child {
    font-size: 60px;
    padding-left: 48px;
    padding-top: 43px;
}
#project li:last-child, #client li:last-child, #months li:last-child {
    font-size: 16px;
    padding-left: 34px;
}

Но третий круг приплюснутый еще не понял почему

@Fedor92 · 02.08.2016, 21:12

Kucc, на самом деле подобная попытка вёрстки не лучший способ для реализации задуманной задачи... Вместо списков можно было бы попробовать использовать только блоки + спан...

@Kucc · 02.08.2016, 21:27 **[ТС]**

Fedor92, мне как-то листы прижились, о том, как правильно писать теги к каждому задуманному элементу, мне еще предстоит запомнить... Спасибо за замечание

@boilzzz · 03.08.2016, 06:26

Kucc,
Как вариант.
песочница

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
#grow {
  display: inline-block;
  height: 450px;
  width: 99.8%;
  border: 1px solid yellow;
  overflow: hidden;
}
 
#project,
#client,
#months {
  border: 1px solid red;
  border-radius: 100%;
  width: 220px;
  height: 160px;
  display: inline-block;
  float: left;
  margin-right: 50px;
}
 
#project,
#client,
#months {
  border: 2px solid blue;
  text-align: center;
  padding-top: 60px;
}
 
#project span:first-child,
#client span:first-child,
#months span:first-child {
  font-size: 60px;
}
 
#project span:last-child,
#client span:last-child,
#months span:last-child {
  font-size: 16px;
}

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div id="grow">
  <div id="project">
    <span>1</span>
    <br>
    <span>PROJECT</span>
  </div>
  <div id="client">
    <span>0</span>
    <br>
    <span>CLIENTS</span>
  </div>
  <div id="months">
    <span>6</span>
    <br>
    <span>MONTHS</span>
  </div>
 
</div>

@Kucc · 03.08.2016, 07:54 **[ТС]**

boilzzz, спасибо Вам большое!Я пытался изменить на спаны, но плохо пытался видимо. Интересует, зачем 2 раза border повторять?

Сообщение от boilzzz

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
#project,
#client,
#months {
* border: 1px solid red;
* border-radius: 100%;
* width: 220px;
* height: 160px;
* display: inline-block;
* float: left;
* margin-right: 50px;
}
#project,
#client,
#months {
* border: 2px solid blue;
* text-align: center;
* padding-top: 60px;
}

@boilzzz · 03.08.2016, 10:36

Kucc,

Сообщение от Kucc

зачем 2 раза border повторять?

Это просто случайно вышло) Я под конец код не почистил.

@Cdelphi78 · 03.08.2016, 12:05

Я выравниваю text centrom и vertical align потому что flex align-atims не всегда работает)

@boilzzz · 03.08.2016, 12:18

Сообщение от Cdelphi78

flex align-atims не всегда работает)

Вот тут о флексах вообще рядом разговора не было. А вот на счет вертикал алигна попрошу сверстать пример чтобы убедится что вы это можете) Ну за одно и почерпать просветления у вас.

@Cdelphi78 · 03.08.2016, 12:56

Пример:
HTML - код:

HTML5
1
2
3
<div class="round-item">
    <p class="num">num 1</p>
  </div>

CSS-стили:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.round-item {
  display: table;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 1px solid black;
  text-align: center;
  margin: 0 auto;
}
.round-item p {
  display: table-cell;
  font-family: verdana;
  font-size: 26px;
  margin: 0;
  padding: 0;
  vertical-align: middle;
}

https://jsfiddle.net/Cdelphi78/4xu5kh2w/

Как то примерно так. Ну хотя с флексами такая же история:

HTML5
1
2
3
<div class="round-item">
    <p class="num">num 1</p>
  </div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.round-item {
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 1px solid black;
  margin: 0 auto;
}
.round-item p {
  font-family: verdana;
  font-size: 26px;
  margin: 0 auto;
  padding: 0;
}

https://jsfiddle.net/Cdelphi78/86rv1z8h/

проблема в том что необходимо указывать высоту родителю что не подходит для динамического текста

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Desktop (MinGW): Рисуем цветные прямоугольники с помощью рисовальщика SDL3 на Си и C++ 8Observer8 17.03.2026 Содержание блога Финальные проекты на Си и на C++: finish-rectangles-sdl3-c. zip finish-rectangles-sdl3-cpp. zip	Символические и жёсткие ссылки в Linux. algri14 15.03.2026 Существует два типа ссылок — символические и жёсткие. Ссылка в Linux — это запись в каталоге, которая может указывать либо на inode «файла-ИСТОЧНИКА», тогда это будет «жёсткая ссылка» (hard link),. . .	[Owen Logic] Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ФедосеевПавел 14.03.2026 Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ВВЕДЕНИЕ Выполняя задание на управление насосной группой заполнения резервуара,. . .	делаю науч статью по влиянию грибов на сукцессию anaschu 13.03.2026 прикрепляю статью
SDL3 для Desktop (MinGW): Создаём пустое окно с нуля для 2D-графики на SDL3, Си и C++ 8Observer8 10.03.2026 Содержание блога Финальные проекты на Си и на C++: hello-sdl3-c. zip hello-sdl3-cpp. zip Результат:	Установка CMake и MinGW 13.1 для сборки С и C++ приложений из консоли и из Qt Creator в EXE 8Observer8 10.03.2026 Содержание блога MinGW - это коллекция инструментов для сборки приложений в EXE. CMake - это система сборки приложений. Здесь описаны базовые шаги для старта программирования с помощью CMake и. . .	Как дизайн сайта влияет на конверсию: 7 решений, которые реально повышают заявки Neotwalker 08.03.2026 Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .	Модульная разработка через nuget packages DevAlt 07.03.2026 Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .

@Fedor92 2964 / 2621 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	02.08.2016, 21:12
	Kucc, на самом деле подобная попытка вёрстки не лучший способ для реализации задуманной задачи... Вместо списков можно было бы попробовать использовать только блоки + спан... 0

@Kucc 5 / 2 / 3 Регистрация: 21.06.2013 Сообщений: 117
	02.08.2016, 21:27 [ТС]
	Fedor92, мне как-то листы прижились, о том, как правильно писать теги к каждому задуманному элементу, мне еще предстоит запомнить... Спасибо за замечание 0

@Cdelphi78 140 / 74 / 18 Регистрация: 21.02.2014 Сообщений: 3,444
	03.08.2016, 12:05
	Я выравниваю text centrom и vertical align потому что flex align-atims не всегда работает) 0