Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 5.00/8: Рейтинг темы: голосов - 8, средняя оценка - 5.00
ptiyyy
0 / 0 / 0
Регистрация: 12.05.2016
Сообщений: 12
#1

Расстояние и разделение между кнопками

12.05.2016, 19:14. Просмотров 1426. Ответов 5
Метки нет (Все метки)

всем привет помогите решить мою проблемку
Собственно сама проблема заключается в том, что нужно убрать расстояние между кнопками и между ними вставить маленькие оазделяющие картинки как на второй приложенной картинке
html
Кликните здесь для просмотра всего текста
HTML5
1
2
3
4
5
6
7
8
9
10
11
<div class="darkbg"><div id="menubar">
        <div class="lcol">
          <ul class="hr">
            <li><a href="index.php" class="knopka">1</a></li>
            <li><a href="music" class="knopka">2</a></li>
            <li><a href="video" class="knopka">3</a></li>           
 <li><a href="mail.html" class="knopka">4</a></li>
          
  
 
 </ul>

css
Кликните здесь для просмотра всего текста
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<style>
   ul.hr {
    margin: 0; /* Обнуляем значение отступов */
    padding: 0px; /* Значение полей */
   }
   ul.hr li {
    display: inline; /* Отображать как строчный элемент */
    margin-right: 0px; /* Отступ слева */
    padding: 0px; /* Поля вокруг текста */
   }
  
a.knopka {
  color: #fff; /* цвет текста */
  text-decoration: none; /* убирать подчёркивание у ссылок */
  user-select: none; /* убирать выделение текста */
  background: rgb(212,75,56);  /*фон кнопки */
  padding: .7em 1.5em; /* отступ от текста */
  outline: none; /* убирать контур в Mozilla */
  } 
a.knopka:hover { background: rgb(232,95,76); } /* при наведении курсора мышки */
a.knopka:active { background: rgb(152,15,0); } /* при нажатии */
  </style>

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

0
Миниатюры
Расстояние и разделение между кнопками   Расстояние и разделение между кнопками  
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
12.05.2016, 19:14
Ответы с готовыми решениями:

Расстояние между кнопками
Здравствуйте, есть проблема с кнопками, а именно расстояние между ними ...

Расстояние между кнопками
можно ли стандартными средствами css и html, сделать так чтоб расстояние &quot;а&quot;...

Задать расстояние между кнопками?
Подскажите как задать расстояние между кнопками не сдвигая их в лево ?...

iframe конфликт между кнопками
На форме неколько полей и две кнопки, одна для просмотра набранного...

Пробел между кнопками в панели навигации
&lt;nav&gt; &lt;ul class=&quot;nav&quot;&gt; &lt;li&gt;&lt;a href=&quot;&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;...

5
Listed Illusion
2 / 2 / 2
Регистрация: 12.05.2016
Сообщений: 48
12.05.2016, 19:22 #2
Именно картинки нужно?
Можно сделать проще, дать каждому(кроме последнего) элементу li класс:
HTML5
1
2
3
4
            <li class="border"><a href="index.php" class="knopka">1</a></li>
            <li class="border"><a href="music" class="knopka">2</a></li>
            <li class="border"><a href="video" class="knopka">3</a></li>           
            <li><a href="mail.html" class="knopka">4</a></li>
и дописать в css:
CSS
1
2
3
.border {
border-right: 1px solid blue;
}
0
ptiyyy
0 / 0 / 0
Регистрация: 12.05.2016
Сообщений: 12
12.05.2016, 19:27  [ТС] #3
да, так тоже подойдет.
но как теперь убрать огромные расстояния между кнопками?
0
Listed Illusion
2 / 2 / 2
Регистрация: 12.05.2016
Сообщений: 48
12.05.2016, 20:36 #4
честно говоря, понятия не имею откуда берется отступ
0
mrtoxas
Модератор
Эксперт HTML/CSS
2549 / 1886 / 1179
Регистрация: 12.07.2015
Сообщений: 5,094
Записей в блоге: 3
12.05.2016, 23:01 #5
Listed Illusion, потому что между инлайновыми элементами априори будут отступы. Попробуй написать все li в одну строку и поймешь.

А насчет кода ТС, то оступы убираются таким фокусом:
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
.hr {
    margin: 0; 
    padding: 0px;
    font-size:0; 
    letter-spacing:-1px;
   }
.hr li {
    display: inline; 
    margin-right: 0px; 
    padding: 0px;
    font-size:14px;
    line-height:normal;
   }
0
Kenworth
102 / 102 / 58
Регистрация: 21.10.2013
Сообщений: 324
13.05.2016, 09:41 #6
Все гораздо проще. Просто расширь свою ul-ку, дописав к нему еще один класс и вставь вот такой код:
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
<div class="darkbg">
  <div id="menubar">
    <div class="lcol">
      <ul class="hr inline-list">
        <li><a href="index.php" class="knopka">1</a></li>
        <li><a href="music" class="knopka">2</a></li>
        <li><a href="video" class="knopka">3</a></li>           
        <li><a href="mail.html" class="knopka">4</a></li>
      </ul>
    </div>
  </div>
</div>
CSS
1
2
3
4
5
6
7
8
9
.inline-list {
  clear: both;
}
.inline-list > li {
  float: left;
  & + li {
    margin-left: 10px;
  }
}
0
13.05.2016, 09:41
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
13.05.2016, 09:41

Как убрать разделение между меню и картинкой?
Здравствуйте. Помогите, пожалуйста, поправить код. Проблема в том, что между...

Расстояние между строками
Здравствуйте, какой оптимальное расстояние между строками (line-height в px) ...

Расстояние между изображениями
Здравствуйте, мне нужно сделать сайт на одну страницу с изображением по центру,...


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

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

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