html — Убрать подчёркивание у активной вкладки
Задать вопрос
Вопрос задан
Изменён 6 лет 7 месяцев назад
Просмотрен 197 раз
На данный момент так:
Каким образом сделать так, чтобы у активной вкладки не было подчёркивания? Возможно как-то переделать, главное не использовать что-то наподобии margin-top: -1px.
https://jsfiddle.net/ox3kx17c/1/
.tabs {
margin-bottom: 20px;
border-bottom: 1px solid #bfbfbf;
}
.tabs a {
text-decoration: none;
display: inline-block;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 15px;
padding-right: 15px;
font-size: 18px;
color: #444444;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.
tabs a.active {
background: #ffffff;
border: 1px solid #bfbfbf;
border-bottom: none !important;
color: #1e7ec8 !important
}
<div> <a href="#">Настройки</a> <a href="#">Мои заказы</a> <a href="#">Test</a> </div>
- html
- css
9
Зафиксировать высоту вкладки и высоту контейнера. Добавить активной вкладке нижнюю границу под цвет фона страницы.
.tabs {
margin-bottom: 20px;
border-bottom: 1px solid #bfbfbf;
height:42px;
}
.tabs a {
text-decoration: none;
display: inline-block;
padding:10px 15px;
height:21px;
font-size: 18px;
color: #444444;
border-radius:10px 10px 0 0;
}
.tabs a.active {
background: #ffffff;
border: 1px solid #bfbfbf;
border-bottom-color:#FFF;
color: #1e7ec8 !important;
} <div> <a href="#">Настройки</a> <a href="#">Мои заказы</a> <a href="#">Test</a> </div>
* {
box-sizing: border-box;
}
. tabs {
margin-bottom: 20px;
font-size: 0;
position: relative;
}
.tabs a {
text-decoration: none;
display: inline-block;
padding: 10px 15px;
font-size: 18px;
color: #444444;
border-radius: 10px 10px 0 0;
}
.tabs a.active {
position: relative;
background: #ffffff;
border: 1px solid #bfbfbf;
border-bottom: none;
color: #1e7ec8 !important;
}
.tabs:before,
.tabs a.active:before {
content: '';
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 1px;
background: #bfbfbf;
}
.tabs a.active:before {
background: #fff;
}
tabs {
margin-bottom: 20px;
font-size: 0;
position: relative;
}
.tabs a {
text-decoration: none;
display: inline-block;
padding: 10px 15px;
font-size: 18px;
color: #444444;
border-radius: 10px 10px 0 0;
}
.tabs a.active {
position: relative;
background: #ffffff;
border: 1px solid #bfbfbf;
border-bottom: none;
color: #1e7ec8 !important;
}
.tabs:before,
.tabs a.active:before {
content: '';
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 1px;
background: #bfbfbf;
}
.tabs a.active:before {
background: #fff;
}<div> <a href="#">Настройки</a> <a href="#">Мои заказы</a> <a href="#">Test</a> </div>
1
Зарегистрируйтесь или войдите
Регистрация через Google
Регистрация через FacebookРегистрация через почту
Отправить без регистрации
Почта
Необходима, но никому не показывается
Отправить без регистрации
Почта
Необходима, но никому не показывается
Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки
Как на сайте убрать подчеркивание ссылок на CSS?
Исторически сложилось так, что при обработке веб-документа браузеры подчеркивают и выделяют особым цветом гиперссылки.
Это может серьезно нарушать дизайнерскую задумку и портить внешний вид сайта. Веб-мастер может применить специальные инструкции CSS и убрать подчеркивание ссылки, чтобы красиво вписать ее в страницу.
Зачем подчеркивают ссылки?
С самого зарождения всемирной паутины гиперссылки имеют особенное значение. Именно они выполняют важнейшую функцию объединения миллионов разных веб-документов в одну сеть.
Особый статус элемента определил необходимость его выделения на странице каким-либо способом. Чтобы ссылка не сливалась с остальным текстом (который изначально был просто черным), решено было ее подчеркивать и раскрашивать синим цветом. Кроме того, были добавлены эффекты при наведении мыши (исчезновение подчеркивания, изменение курсора) и изменение цвета уже посещенных ссылок.
Вот так выглядели первые интернет-сайты:
Гиперссылки сразу выделяются на фоне окружающего текста.
Такое поведение элементов закрепилось, и браузеры стали применять его по умолчанию.
Выделение ссылок
С развитием CSS появилось множество возможностей сделать ссылочный элемент заметным, не прибегая к подчеркиванию.
Более того, в ряде случаев эта тонкая линия стала нежелательной, так как не вписывалась в дизайн веб-страницы.
Верстальщикам нужна была возможность с помощью CSS убрать нижнее подчеркивание ссылок, например, в главном меню сайта и сайдбарах.
Таким образом, сохранилась основная идея, устанавливающая, что гиперссылка должна быть заметной, но способ ее реализации по умолчанию не всегда соответствовал потребностям.
Изменение стиля гиперссылки
Убрать подчеркивание ссылки на CSS очень просто. Для этого существует специальная инструкция text-decoration. Она заведует оформлением фрагмента текста с помощью горизонтальной линии и определяет ее конкретное расположение.
Список значений, которые может принимать это свойство:
underline– нижнее подчеркивание;overline– верхнее подчеркивание, линия проходит над текстом;line-through– зачеркивание, линия проходит посередине строки;none– отсутствие оформления.
По умолчанию браузеры применяют к гиперссылкам инструкцию text-decoration: underline. Очевидно, что нас интересует значение none. Оно позволяет обнулить ранее примененные стили, а также сбросить оформление по умолчанию.
Чтобы убрать подчеркивание ссылки на CSS, следует применить к ней следующее правило:
a {
text-decoration: none;
}Поддержка браузерами
Свойство text-decoration и его значение none отлично поддерживаются всеми существующими браузерами, включая их старые версии, так что убрать подчеркивание ссылки на CSS можно без особенных трудностей.
css — Удалить синее подчеркивание из ссылки
спросил
Изменено 10 дней назад
Просмотрено 1,4 млн раз
Я пытаюсь сделать так, чтобы ссылка отображалась белым цветом без подчеркивания.
Цвет текста правильно отображается как белый, но синее подчеркивание упрямо сохраняется. я пробовал украшение текста: нет; и оформление текста: нет !важно; в CSS, чтобы убрать подчеркивание ссылки. Ни один из них не работал.
.boxhead .otherPage {
цвет: #FFFFFF;
текстовое оформление: нет;
} <дел>Текущая страница Другая страница
Убедитесь, что ваш стиль применяется к рассматриваемому состоянию (состояниям) и что никакие другие стили не конфликтуют.
Соответственно измените его оболочку… И используйте специфичность вместо «! важно» после того, как вы отследите основную причину.
В моем случае был стандартный
.. Но вы можете изменить text-decoration-color .
nav-tabs li a{
текстовое оформление: нет;
}
example.com/content/" target"_blank">случайный текст здесь
