html - CSS 无法在定义为无序列表的导航栏中填充文本

Question

我有一个网站，其导航栏使用一些 div 和无序列表定义。

    <!--Nav Bar-->
    <div class="nav-blur"></div>
    <div class="nav">
        <img class="logo" src="img/rectangle.png">
        <ul class="links">
            <li class="link text"><a href="#">Home</a></li>
            <li class="link divider">&nbsp;|&nbsp;</li>
            <li class="link text"><a href="#">About Us</a></li>
            <li class="link divider">&nbsp;|&nbsp;</li>
            <li class="link text"><a href="#">Contact Us</a></li>
            <li class="link divider">&nbsp;|&nbsp;</li>
            <li class="link button"><a href="#">Get Started</a></li>
        </ul>
    </div>

目前，导航栏中的最后一个链接是一个按钮，不同于其他纯文本链接。

Nav Bar Example Image

这是我的 CSS 样式:

.nav-blur {
    width: 100%;
    height: 45px;
    position: fixed;
    top: 0px;
    -webkit-filter: blur(10px);     
    filter: blur(10px);
    background-color: rgba(0, 0, 0, 0.6);
}

.nav {
    width: 100%;
    height: 45px;
    background-color: rgba(0, 0, 0, 0.7);
    position: fixed;
    top: 0px;
}


.nav .logo {
    padding-left: 20px;
    padding-top: 1px;
    height: 95%;
    width: auto;
}

.nav .links {
    list-style-type: none;
    margin: 0;
    padding: 11px;
    padding-right: 30px;
    float: right;
}

.nav .divider {
    color: whitesmoke;
}

.nav .links .link {
    display: inline;
}

.nav .links .link a {
    color: whitesmoke;
    text-decoration: none;
    font-style: normal;
}

.nav .links .link a:hover {
    color: grey;
    text-decoration: none;
    font-style: normal;
}

.nav .links .button {
    background-color: rgba(103, 155, 193, 1);
    border-radius: 5px;
    box-shadow: 2px 2px 1px rgba(0, 0, 0, 1);
}

.nav .links .button:hover {
    background-color: rgba(103, 155, 193, 0.5);
    border-radius: 5px;
    box-shadow: 2px 2px 1px rgba(0, 0, 0, 1);
}

.nav .links .button a {
    padding-right: 7px;
    padding-left: 7px;
    padding-top: 5px;
    padding-bottom: 5px;
    text-align: center;
}

我目前的问题是，虽然我可以调整按钮内文本左右两侧的填充，但我无法垂直调整填充。我尝试用 padding 和 margins 添加我需要的间距，这两者都没有任何效果。

.nav .links .button a {
    padding-right: 7px;
    padding-left: 7px;
    padding-top: 5px;
    padding-bottom: 5px;
    text-align: center;
}

.nav .links .button a {
    padding-right: 7px;
    padding-left: 7px;
    margine-top: 5px;
    margine-bottom: 5px;
    text-align: center;
}

我也试过将文本放在一个单独的 div 中，这让 ro 严重地弄乱了我的导航栏。

我需要添加什么 CSS 才能为按钮内的文本提供一些垂直填充？

Answer 1

垂直填充被 inline 元素忽略...这是 anchor 链接的默认 display 类型。

将链接(和 li)设置为 display:inline-block。

.nav .links .link a {
    color: whitesmoke;
    text-decoration: none;
    font-style: normal;
    display:inline-block;
}

.nav .links {
  list-style-type: none;
  margin: 0;
  padding: 11px;
  padding-right: 30px;
  float: right;
  background: #000;
}
.nav .divider {
  color: whitesmoke;
}
.nav .links .link {
  display: inline-block;
}
.nav .links .link a {
  color: whitesmoke;
  text-decoration: none;
  font-style: normal;
  display: inline-block;
}
.nav .links .link a:hover {
  color: grey;
  text-decoration: none;
  font-style: normal;
}
.nav .links .button {
  background-color: rgba(103, 155, 193, 1);
  border-radius: 5px;
  box-shadow: 2px 2px 1px rgba(0, 0, 0, 1);
}
.nav .links .button:hover {
  background-color: rgba(103, 155, 193, 0.5);
  border-radius: 5px;
  box-shadow: 2px 2px 1px rgba(0, 0, 0, 1);
}
.nav .links .button a {
  padding: 7px;
  text-align: center;
}

<div class="nav">
  <ul class="links">
    <li class="link text"><a href="#">Home</a>
    </li>
    <li class="link divider">&nbsp;|&nbsp;</li>
    <li class="link text"><a href="#">About Us</a>
    </li>
    <li class="link divider">&nbsp;|&nbsp;</li>
    <li class="link text"><a href="#">Contact Us</a>
    </li>
    <li class="link divider">&nbsp;|&nbsp;</li>
    <li class="link button"><a href="#">Get Started</a>
    </li>
  </ul>
</div>