在菜单栏HTML中编辑下划线的长度

Question

我正在当前页面创建一个带下划线的菜单栏，但是我需要帮助来编辑下划线的长度，以便长度将是菜单栏中文本的长度。需要帮忙！感谢

.title_span {
  font-weight: bold;
  text-decoration: underline;
  padding-left: 20px;
}
.underline {
  padding-bottom: 25px;
  display: inline;
  border-bottom: grey 4px solid;
}

<nav>
  <ul id="navlist">
    <li><span class="underline"><a href="index.html">HOME</a></span>
    </li>
    <li><a href="#">PROFILE</a>
    </li>
    <li><a href="#">SERVICES</a>
    </li>
</nav>

Answer 1

在左侧和右侧添加填充

在.underline css代码中添加以下行：

padding-right: 20px;
padding-left: 20px;

您可能需要根据您的情况调整像素数量

这应该增加长度，但占用更多空间，希望它有所帮助。