我的a元素在沒有鏈接的字母周圍有一個邊框

-2

由於某些原因，鏈接的字母上方和下方有一條細線，無法正常工作。我玩過這個遊戲，看了類似的問題，但到目前爲止沒有任何修正。我對網站設計比較陌生，所以我很抱歉，如果它很sl，，但是這裏是代碼。我的a元素在沒有鏈接的字母周圍有一個邊框

.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>

編輯：爲了澄清，有導航按鈕不充當鏈接的區域。例如，如果我點擊右上方或下方的1（<li><a href="#">1</a></li>），它就不會將我帶到目標網站。在其他線程上，建議的修復方法是使a元素顯示塊和li元素內聯塊，但是這並沒有解決它。此外，我忘了添加另一部分，我做了所有的元素文本裝飾：沒有;我已將它添加到代碼片段中。它的功能應該和.nav一樣，對吧？

來源

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元素時，它也不能解決問題。另外，我忽略發佈它，但在樣式表的一個單獨部分中，我使所有元素都具有text-decoration：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

我的a元素在沒有鏈接的字母周圍有一個邊框

回答

相關問題