Мои элементы имеют границу вокруг букв, которые не связаны

-2

По какой-то причине есть тонкая линия над и под буквами ссылки, которая не будет работать правильно. Я играл с ним и смотрел на подобные вопросы, но до сих пор ничего не зафиксировало. Я относительно новичок в дизайне сайта, поэтому извиняюсь, если он неаккуратный, но вот код.Мои элементы имеют границу вокруг букв, которые не связаны

.nav ul { 
 
\t padding: 0px 18px; 
 
\t display: block; 
 
} 
 
.nav a { 
 
\t padding: 8px 18px; 
 
\t border: 2px solid #eeeeee; 
 
\t border-radius: 8px; 
 
\t cursor: pointer; 
 
\t background-color: #000000; 
 
\t display: block; 
 
} 
 
li { 
 
\t display: inline-block; 
 
} 
 
a { 
 
    text-decoration: none; 
 
} 
 
/* I didn't want text decoration on any link */

<div class="nav"> 
 
\t \t \t <ul> 
 
\t \t \t \t <li><a href="#">1</a></li> 
 
\t \t \t \t <li><a href="#">2</a></li> 
 
\t \t \t \t <li><a href="#">3</a></li> 
 
\t \t \t \t <li><a href="#">4</a></li> 
 
\t \t \t </ul> 
 
\t \t </div>

Edit: Чтобы уточнить, есть область навигационных кнопок, которые не функционируют в качестве ссылки. Например, если бы я щелкнул выше или ниже 1 (<li><a href="#">1</a></li>), это не привело бы меня к целевому сайту. В других потоках предлагаемое исправление заключалось в том, чтобы сделать блок отображения элемента и встроенный блок li, однако это не устранило его. Кроме того, я забыл добавить еще одну часть, где я сделал все элементы text-decoration: none; Я добавил его в фрагмент кода. Он должен функционировать так же, как и в .nav a, правильно?

источник

2016-11-30 aro ra

что ваш 2px 'border' – kukkuz

что вы действительно нужно, можете ли вы более конкретно? –

тонкая линия над буквами? –

Удалить границу. Изменение CSS к этому:

.nav a { 
    padding: 8px 18px; 
    border: none; /*changed*/ 
    border-radius: 8px; 
    cursor: pointer; 
    background-color: #000000; 
    display: block; 
}

источник

2016-11-30 08:19:59 Aslam

Я думаю, вы говорите о text-decoration.

.nav a { 
    padding: 8px 18px; 
    /*border: 2px solid #eeeeee;*/ 
    border-radius: 8px; 
    cursor: pointer; 
    text-decoration: none; 
    background-color: #000000; 
    display: block; 
    }

Надеюсь, это сработает для вас. Также вы заметите, что я прокомментировал border: 2px solid #eeeeee;. Может быть, вы говорите об этих строках?

источник

2016-11-30 08:27:23 xaid

Я надеюсь сохранить границу для стилистических целей, но даже когда я перехожу к элементу li, это не устраняет проблему. Кроме того, я забыл опубликовать его, но в отдельной части таблицы стилей я создал все элементы с текстовым оформлением: none; Я добавлю это к вопросу. –

это исправить вашу проблему счастливым кодирования ..

.nav a { 
 
    padding: 8px 18px; 
 
    border-radius: 5px; 
 
    cursor: pointer; 
 
    text-decoration: none; 
 
    color: white; 
 
    background-color: #000000; 
 
    display: block; 
 
}

источник

2016-11-30 08:31:37

Пожалуйста, добавьте некоторое объяснение, почему этот код помогает OP. Это поможет обеспечить ответ, о котором могут узнать будущие зрители. См. [Ответ] для получения дополнительной информации. –

Просто добавленный текст-украшение

.nav ul { 
 
\t padding: 0px 18px; 
 
\t display: block; 
 
} 
 
.nav a { 
 
\t padding: 8px 18px; 
 
\t border: 2px solid #eeeeee; 
 
\t border-radius: 8px; 
 
\t cursor: pointer; 
 
\t background-color: #000000; 
 
\t display: block; 
 
    text-decoration:none; // added this 
 
} 
 
li { 
 
\t display: inline-block; 
 
}

<div class="nav"> 
 
\t \t \t <ul> 
 
\t \t \t \t <li><a href="#">1</a></li> 
 
\t \t \t \t <li><a href="#">2</a></li> 
 
\t \t \t \t <li><a href="#">3</a></li> 
 
\t \t \t \t <li><a href="#">4</a></li> 
 
\t \t \t </ul> 
 
\t \t </div>

источник

2016-11-30 08:57:43

Мои элементы имеют границу вокруг букв, которые не связаны

ответ

Смежные вопросы