Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.80/5: Рейтинг темы: голосов - 5, средняя оценка - 4.80
delphi-sly
84 / 19 / 6
Регистрация: 23.09.2012
Сообщений: 611
1

Добавить текст справа от номера пункта

10.10.2016, 13:32. Просмотров 850. Ответов 4
Метки нет (Все метки)

Имеется код:
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 <div class="col-md-6">
    <div class="modal-content">
        <div class="modal-header">
            <h4 class="modal-title">Привет Мир </h4>
        </div>
        <div class="modal-body">
            <p>1</p>
        </div>
        <div class="modal-body">
            <p>2</p>
        </div>
        <div class="modal-body">
            <p>3</p>
        </div>
        <div class="modal-body">
            <p>4</p>
        </div>
    </div>
</div>
Выглядит это так:

Как добавить текст справа?? text align пробовал, но тогда получается отступ сверху и как бы вкось. а нужно на ровне
0
Миниатюры
Добавить текст справа от номера пункта  
Лучшие ответы (1)
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
10.10.2016, 13:32
Ответы с готовыми решениями:

Выделение пункта меню при наведении - только текст или весь блок пункта
Всем привет.Есть меню, при наведении появляется hover но он идет строго по...

Фон для номера пункта на большом фоне
Есть небольшой блок с основным фоном, фон в виде синей заливки всего блока с...

Все фото слева, а текст справа. Нужно свой текст под своим фото
Вот такая ситуация, довльно простая, но до меня никак не допрёт как это...

Добавить 3-юю див колонку справа
Добрый вечер. Подскажите, пожалуйста, как добавить колонку див справа третьей....

Добавить гибкое изображение справа в bootstrap
Как добавить справа изображение из макета PSD в разметку бустрап? Макет...

4
Fedor92
Человек из 90-х
Эксперт HTML/CSS
2745 / 2305 / 1017
Регистрация: 15.12.2012
Сообщений: 8,561
Записей в блоге: 1
10.10.2016, 14:17 2
Лучший ответ Сообщение было отмечено Fedor92 как решение

Решение

delphi-sly, а почему Вы не используете список?
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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
 
    <!-- Optional theme -->
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
 
    <!-- Latest compiled and minified JavaScript -->
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
    <style>
        span:first-child{margin-right:10px}
    </style>
</head>
<body>
    <div class="col-md-6">
    <div class="modal-content">
        <div class="modal-header">
            <h4 class="modal-title">Привет Мир </h4>
        </div>
        <div class="modal-body">
            <span>1</span><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea, atque fugit fugiat illo eaque iusto autem. Maxime, non, officiis nam in molestiae explicabo dolorem temporibus sequi consequatur repellat. Rem, sequi.</span>
        </div>
        <div class="modal-body">
            <span>2</span><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad, quasi, laudantium suscipit totam molestias temporibus iure ipsum quidem iusto cupiditate modi harum reprehenderit distinctio similique cum possimus veritatis debitis alias.</span>
        </div>
        <div class="modal-body">
            <span>3</span><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In, maiores, nisi, nam dolorem facilis deleniti quibusdam aspernatur doloremque cumque deserunt enim blanditiis aut voluptas suscipit rerum accusantium dolorum! Corporis, fugit.</span>
        </div>
        <div class="modal-body">
            <span>4</span><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum, ducimus perspiciatis unde recusandae earum nesciunt voluptas hic eos distinctio adipisci voluptatem tenetur veritatis rem illum quos error iusto nisi similique.</span>
        </div>
    </div>
</div>
</body>
</html>
0
delphi-sly
84 / 19 / 6
Регистрация: 23.09.2012
Сообщений: 611
31.10.2016, 00:18  [ТС] 3
Нужно больше отступа, как вы предлагаете:
0
Миниатюры
Добавить текст справа от номера пункта  
Fedor92
Человек из 90-х
Эксперт HTML/CSS
2745 / 2305 / 1017
Регистрация: 15.12.2012
Сообщений: 8,561
Записей в блоге: 1
31.10.2016, 10:57 4
delphi-sly, вот, как Вам нужно, надо объяснять в начале темы и нормально, чтобы было понятно чего Вы хотите... А так, я лично никаких проблем не вижу...

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
 
    <!-- Optional theme -->
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
 
    <!-- Latest compiled and minified JavaScript -->
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
    <style>
        .modal-body{position:relative}
        .number{position:absolute; left:15px}
        .text{display: block; text-align: center}
    </style>
</head>
<body>
    <div class="col-md-6">
    <div class="modal-content">
        <div class="modal-header">
            <h4 class="modal-title">Заголовок</h4>
        </div>
        <div class="modal-body">
            <span class="number">1</span><span class="text">Lorem ipsum</span>
        </div>
        <div class="modal-body">
            <span class="number">2</span><span class="text">Lorem ipsum</span>
        </div>
        <div class="modal-body">
            <span class="number">3</span><span class="text">Lorem ipsum</span>
        </div>
        <div class="modal-body">
            <span class="number">4</span><span class="text">Lorem ipsum</span>
        </div>
    </div>
</div>
</body>
</html>
1
delphi-sly
84 / 19 / 6
Регистрация: 23.09.2012
Сообщений: 611
31.10.2016, 18:28  [ТС] 5
Спасибо, то, что нужно.
0
31.10.2016, 18:28
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
31.10.2016, 18:28

Картинка слева, текст справа
&lt;div align=&quot;left&quot;&gt; &lt;table border=&quot;0&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot;&gt; ...

Раскрывающийся текст - без скролла справа
Здравствуйте! Есть скрипт раскрывающихся блоков. Проблема в том, что когда...

Как разместить текст и кнопки справа от таблицы
Когда в css пишу float: right; кнопки не работают.


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
5
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru