背景顏色是相同的高度和寬度的文字或鏈接

如何以減少背景色的高度幾乎相同的高度爲紐帶，我試圖對CSS的使用高度，但它沒有工作

CSS

.login { 

    color: #4CAF50; 
    background-color: #a0ce4e; 

} 

.login a { 
    cursor: pointer; 
    display: inline-block; 
    background: #a0ce4e; 
    border-radius: 1px; 
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); 
    padding: 10px 15px; 
    color: #ffffff; 
    text-decoration: none; 
    -webkit-transition: 0.3s ease; 
    transition: 0.3s ease; 
} 
.login a:hover { 
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); 
}

HTML

<div class="login"> 
      <ul class="nav navbar-nav"> 
       <li class="active"> 
        <a class="page-scroll" href="#">Login</a> 

       </li> 
      </ul> 
     </div>

來源

2016-08-22 Monnapula Jacob Maijane

鏈接到這裏小提琴：https://jsfiddle.net/y7g73b43/1/ –

你想讓你的代碼像那個圖像？ –

你喜歡bootstrap使用外部庫嗎？ – Kossel

刪除填充：

.login a { 
    padding: 0px; /* or 1.. */ 
}

來源

2016-08-22 14:37:06

那些看起來像自舉類，所以我會說，你可能需要從導航欄，導航欄中移除填充和/或利潤率。

您可以通過添加自己的類並使用它來添加覆蓋樣式來完成此操作。例如：

CSS：

.navbar-nav.navbar-nospace { 
    margin: 0px; 
    padding: 0px; 
}

HTML：

<ul class="nav navbar-nav navbar-nospace">

來源

2016-08-22 14:40:24 BDawg

背景顏色是相同的高度和寬度的文字或鏈接

回答

相關問題