僅下劃線文本不再

Question

我已經經歷了大部分我能找到的東西，但沒有幸運。我只想從文本鏈接的開始處將文字鏈接加下劃線到結尾。我會認爲這應該很簡單。我的工作在該網站是：

http://tahoe-luxury-properties.com/index4.html 

頂部導航的鏈接有在底部邊框，但他們正在擴展比文本鏈接較大。我使用下面的CSS：

.hot-menu { 
    font-size: 13px; 
    letter-spacing: 1.1px; 
    font-weight: 400; 
    font-family: "Oswald", Arial, Helvetica; 
    line-height: 20px; 
    float: left; 
    text-align: center; 
    border-bottom-color: #0CF; 
    border-bottom-style: solid; 
    display: table; 
    border-bottom-width: fit-content; 
    margin: 5px; 
} 

如果任何人有這將是巨大的任何想法。謝謝。 -Beth

Answer 1

您的頁面上出現<li>的所有<a>左/右縮進。

li a { 
    display: block; 
    color: white; 
    text-align: center; 
    padding: 7px 11px; 
    text-decoration: none; 
    text-transform: uppercase; 
    font-family: "abc-modern",sans-serif; 
} 

覆蓋此樣式，如下所示刪除左/右縮進。

.hot-menu li a { 
    padding-left: 0; 
    padding-right: 0; 
} 

Answer 2

將邊框應用於具有填充的元素。

padding: 7px 11px;

填充適用於元件的內部，從而拉伸該元件。邊框被應用到你的元素，考慮到填充是伸展它。

試着改變你的風格：

li a { 
    display: block; 
    color: white; 
    text-align: center; 
    padding: 7px 0; 
    text-decoration: none; 
    text-transform: uppercase; 
    font-family: "abc-modern",sans-serif; 
} 

li a + a { 
    margin-left: 11px; 
} 

的a + a選擇每a - 元素由一個a - 元素之前。

如果您想在您的a -Element中保留一定的空間左右，以方便點擊目的或w/e。

你可以試試下面的（沒有測試）：

li a { 
    display: block; 
    color: white; 
    text-align: center; 
    padding: 7px 11px; 
    text-decoration: none; 
    text-transform: uppercase; 
    font-family: "abc-modern",sans-serif; 
} 

.hot-menu:after { 
    content: ""; 
    display: block; 
    background-color: #0cf; //colors are written in small characters usually 
    height: 5px; 
    width: calc(100% - 11px); 
    position: absolute; 
    left: 11px; 
    bottom: 0; 
} 

Answer 3

降低您的填充，增加你的保證金。您的<a class='hot-menu'>標記從li a繼承了11px的水平填充。邊框將跨越填充，但不包括邊距。運行該代碼段，查看比較：

.hot-menu { 
 
    font-size: 13px; 
 
    letter-spacing: 1.1px; 
 
    font-weight: 400; 
 
    font-family: "Oswald", Arial, Helvetica; 
 
    line-height: 20px; 
 
    float: left; 
 
    text-align: center; 
 
    border-bottom-color: #0CF; 
 
    border-bottom-style: solid; 
 
    display: table; 
 
    border-bottom-width: fit-content; 
 
    margin: 5px; 
 
    padding: 7px 11px; /* <-- This is inherited from li a */ 
 
} 
 

 
.hotter-menu { 
 
    font-size: 13px; 
 
    letter-spacing: 1.1px; 
 
    font-weight: 400; 
 
    font-family: "Oswald", Arial, Helvetica; 
 
    line-height: 20px; 
 
    float: left; 
 
    text-align: center; 
 
    border-bottom-color: #0CF; 
 
    border-bottom-style: solid; 
 
    display: table; 
 
    border-bottom-width: fit-content; 
 
    margin: 5px 10px; /* <-- Fix */ 
 
    padding: 7px 0px; /* <-- Fix */ 
 
}

<a class="hot-menu">Old Version</a> 
 
<a class="hotter-menu">New Version</a>

Answer 4

刪除邊框形式.hot-menu 添加樣式

li a { 
    border-bottom: 1px solid #0CF; 
    padding: 7px 0px; 
}