Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.71/17: Рейтинг темы: голосов - 17, средняя оценка - 4.71
Grindelvlad
2 / 2 / 0
Регистрация: 21.07.2014
Сообщений: 19
1

Как заполнить пустое пространство?

21.07.2014, 20:26. Просмотров 3224. Ответов 7
Метки нет (Все метки)

Задача заключается в следующем.
Как сделать, что бы точками было заполнено все пустое пространство между текстом слева и числовым значением справа. Чтобы результат получился как в изображении.
Как заполнить пустое пространство?
0
Лучшие ответы (1)
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
21.07.2014, 20:26
Ответы с готовыми решениями:

Как убрать пустое пространство справа в HTML файле?
При создании HTML файла появляется нижняя полоса прокрутки и справа "за...

Убрать пустое пространство
Всем привет. Вопрос, как убрать выделенную на скриншоте область? Это менюшка...

Пустое пространство в конце
Всем привет, проблема: есть хедер и внутри 2 блока, высота 7 и 93 процента, но...

Пустое пространство справа
Доброго времени суток. Сайт http://the-best.company/. С мобильный устройств,...

Пустое пространство справа
Всем доброго времени суток. В мобильной версии этого сайта, если сдвинуть...

7
Вова101
21 / 13 / 6
Регистрация: 19.07.2014
Сообщений: 115
21.07.2014, 20:29 2
Добрый вечер, можете ли вы дать ссылку сайта из которого вы взяли это изображение, если у вас есть.
0
Grindelvlad
2 / 2 / 0
Регистрация: 21.07.2014
Сообщений: 19
21.07.2014, 20:38  [ТС] 3
Добрый вечер.
Нет, не могу, ибо это скриншот с макета.
0
Вова101
21 / 13 / 6
Регистрация: 19.07.2014
Сообщений: 115
21.07.2014, 20:43 4
вы уже пытались чтото написать? если да то покажите пожалуйста чтобы я знал какой вариант вам больше подойдет
0
Grindelvlad
2 / 2 / 0
Регистрация: 21.07.2014
Сообщений: 19
21.07.2014, 21:03  [ТС] 5
Вот.
Я использовал tabs.

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<div id="tabsIndexAside">
              <ul>
                <li>
                    <a href="#tabsIndexAside-1">Для продажи</a>
                </li>
                <li>
                    <a href="#tabsIndexAside-2">В аренду</a>
                </li>
              </ul>
                <div id="tabsIndexAside-1">
                    <ul>
                        <li>
                            <a href="#">The Palm Jumeirah</a>
                            <span class="indexTabDotted"> .....</span>
                            <span class="indexTabValue">66</span>
                        </li>
                        <li>
                            <a href="#">Dubai Marina</a>
                            <span class="indexTabValue">27</span>
                        </li>
                        <li>
                            <a href="#">Al Hamra Village</a>
                            <span class="indexTabValue">6</span>
                        </li>
                        <li>
                            <a href="#">Jumeirah Beach Residence</a>
                            <span class="indexTabValue">6</span>
                        </li>
                        <li>
                            <a href="#">Emirates Hills</a>
                            <span class="indexTabValue">6</span>
                        </li>
                        <li>
                            <a href="#">Burj Khalifa (Burj Dubai)</a>
                            <span class="indexTabValue">6</span>
                        </li>
                        <li>
                            <a href="#">Jumeirah Islands</a>
                            <span class="indexTabValue">6</span>
                        </li>
                        <li>
                            <a href="#">The Villa</a>
                            <span class="indexTabValue">4</span>
                        </li>
                        <li>
                            <a href="#">Jumeirah Lakes Towers</a>
                            <span class="indexTabValue">3</span>
                        </li> 
                        <li>    
                            <a href="#">Jumeirah Park</a>
                            <span class="indexTabValue">3</span>
                        </li>
                    </ul>
                </div>
                <div id="tabsIndexAside-2">
                    
                </div>
            </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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
#tabsIndexAside ul li{
  display: inline-block;
  color:#fff;
  font-size:0.95em;
  font-weight: bold;
  padding: 0px 9px 0px 14px;
  cursor: pointer;
}
#tabsIndexAside ul li:hover, #tabsIndexAside ul li:active, .ui-state-active,#tabsIndexAside ul li:hover a, #tabsIndexAside ul li:active a, .ui-state-active a{
      background: #fff !important;
      color:#4baad8 !important;
}
.ui-state-default{
      background: #6bace3;
    }
#tabsIndexAside ul li a{
  color:#fff;
  padding: 12px 0px 13px 0px;
  text-decoration: none;
  float:left;
}
div #tabsIndexAside-1 ul li{
  display: block;
  margin: 15px 0px -11px 18px;
  padding: 0px;
  clear: both;
}
.indexTabDotted{
  color:#c1c1c1;
  font-weight: normal;
  text-align: center;
}
div #tabsIndexAside-1 ul li a{
  text-decoration: underline;
  color:#1286c1;
  font-weight: normal;
  font-size: 0.75em;
  margin:0px;
  padding: 0px;
}
div #tabsIndexAside-1 ul li a:hover{
  color:#291c6c !important;
  text-decoration: none;
}
.indexTabValue{
  float:right;
  color:#2c2c2c;
  font-size:0.8em;
  margin: 3px 13px 0px 0px;
}
0
newJS
2397 / 1070 / 307
Регистрация: 23.06.2011
Сообщений: 3,330
21.07.2014, 21:17 6
вот темы по форуму
http://www.cyberforum.ru/html5/thread949474.html
http://www.cyberforum.ru/html5/thread980469.html
http://www.cyberforum.ru/html5/thread981263.html
1
Максим Софронов
0 / 0 / 3
Регистрация: 21.07.2014
Сообщений: 4
21.07.2014, 21:48 7
Лучший ответ Сообщение было отмечено Grindelvlad как решение

Решение

http://jsfiddle.net/maxsof/Ef58J/
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<ul>
    <li>
        <a href="#">The Palm Jumeirah</a>
        <span>66</span>
    </li>
    <li>
        <a href="#">Dubai Marina</a>
        <span>27</span>
    </li>
    <li>
        <a href="#">Al Hamra Village</a>
        <span>6</span>
    </li>
</ul>
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
ul {
    padding: 0;
    overflow: hidden;
}
 
li a {
    list-style: none;
    position: relative;
}
 
li a:before {
    position: absolute;
    content: "";
    border-bottom: 1px dotted #000;
    right: -1005px;
    bottom: 2px;
    width: 1000px;
}
 
span {
    float: right;
    background: #fff;
    padding-left: 5px;
    position: relative;
}
0
Grindelvlad
2 / 2 / 0
Регистрация: 21.07.2014
Сообщений: 19
22.07.2014, 10:40  [ТС] 8
Спасибо Вам за помощь!)
0
22.07.2014, 10:40
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
22.07.2014, 10:40

Пустое пространство справа на сайте
http://sksi.ru/ вот сайт. Может кто знает, чем может вызван такой странный...

Необходимо убрать пустое пространство
Написал код прибрал стили и осталось пространство если зайдете по ссылке...

Убрать пустое пространство в шапке
У меня такая проблема. Когда я ставлю картинку на шапку на моём сайте через...


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

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

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