背景颜色与文本或链接的高度和宽度相同 [英] Background color to be the same height and width as the text or link

问题描述

如何将背景颜色的高度降低到与链接几乎相同的高度，并且我尝试在CSS上使用height，但没有用

How to i reduce the height of the background color to be almost the same height as the link and i tried to use height on CSS but it didn't work

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>

推荐答案

那些看起来像引导类，因此我想您可能需要从navbar-nav中删除填充和/或边距.

Those look like bootstrap classes, so I would say you likely need to remove padding and/or margins from navbar-nav.

您可以通过向其添加自己的类并使用该类来添加替代样式来实现.例如:

You can do this by adding your own class to it and using that to add overriding styles. For example:

CSS :

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

HTML :

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

这篇关于背景颜色与文本或链接的高度和宽度相同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！