0 / 0 / 0
Регистрация: 21.04.2019
Сообщений: 2
1

Проблема с кнопкой

21.04.2019, 14:15. Показов 430. Ответов 2
Метки нет (Все метки)

Добрый день.

Я только начал изучать html и css. Столкнулся с проблемой, что кнопка, которая должна быть выделена рамкой, из-за padding опускается вниз, по сравнению с другими кнопками без рамки.
Можно добавить для .menu li и лого- padding 15px. Тогда всё выравнивается, но правильно ли это?

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div class="heading clearfix">
                    <img src="img/logo.png" alt="Merkury" class="logo">
                <nav>
                    <ul class="menu">
                        <li>
                            <a href="#">Features</a>
                        </li>
                        <li>
                            <a href="#">Pricing</a>
                        </li>
                        <li>
                            <a href="#">Blog</a>
                        </li>
                        <li>
                            <a href="#">Contact</a>
                        </li>           
                        <li class="login">
                            <a href="#" class="textur">Login</a>
                        </li>       
                    </ul>
                </nav>
                </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
.logo {
    margin-top: 68px;
    float: left;
}
nav {
    float: right;
    margin-top: 98px;
}
.menu {
    padding: 0;
    margin: 0;
    display: block;
}
.menu li {
    float: left;
    display: block;
    margin-right: 50px;
}
.menu a {
    color: #ffffff;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 18px;
}
.login {
    color: #000;
    background: none;
    border-radius: 25px;
    display: inline-block;
    width: 130px;
    text-align: center;
    position: relative;
    border: 1px solid #5584ff;
    padding: 15px;
    outline: none;
}
Миниатюры
Проблема с кнопкой  
__________________
Помощь в написании контрольных, курсовых и дипломных работ, диссертаций здесь
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
21.04.2019, 14:15
Ответы с готовыми решениями:

проблема с кнопкой
есть такая форма ...&lt;script type=&quot;text/javascript&quot; src=&quot;jquery.js&quot;&gt;&lt;/script&gt; &lt;script...

Вёрстка блока с кнопкой
Здравствуйте! Нужно сверстать блок с каким-то текстовым содержанием и кнопкой-ссылкой. Вопрос...

Как сохранить кнопкой?
Как сохранить картинку или присвоить расширение а то открывается она только, за ранее спасибо. ...

Вертикальная линия с кнопкой
Подскажите пожалуйста как сделать как на фото: Изображения и любые другие файлы загружайте...

2
Модератор
Эксперт JSЭксперт HTML/CSS
3823 / 2673 / 1521
Регистрация: 12.07.2015
Сообщений: 6,674
Записей в блоге: 4
21.04.2019, 14:25 2
Или
CSS
1
2
3
.login {   
    margin-top: -15px;
}
Все зависит от того, почему у login выделен рамкой. Если рамкой вы выделяете ссылку на текущую страницу, тогда убирайте отступы у li и задавайте их всем ссылкам изначально.
1
0 / 0 / 0
Регистрация: 21.04.2019
Сообщений: 2
21.04.2019, 15:45  [ТС] 3
Спасибо, помогло.
А логин выделен рамкой, потому что в макете так было, по которому верстал. Сначала я делал кнопку логин вообще отдельно через div, но подумал, что это не правильно и решил просто сделать отдельный класс для одного элемента в списке. Если я сделал не правильно, то жду критики)

И я вот хочу спросить. Из-за того, что я применил к ссылкам белый текст, я не могу поставить для логина синий. Как это можно реализовать?
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
21.04.2019, 15:45
Помогаю со студенческими работами здесь

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

скролинг кнопкой на определенную высоту
Есть блок (div) высотой 100px в нем ещё блоки высотой по 30px естественно все они не влезут,...

Всплывающая форма под кнопкой
Как сделать форму на подобие этой?

Всплывающая подсказка с кнопкой удаления
добрый вечер, ребят имеется такой код который выводит подарки на аве &lt;div class=&quot;slider&quot;&gt; &lt;a...


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

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

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2022, CyberForum.ru