html - 带有文本推送问题的垂直导航

Question

我想在文本旁边制作一个带有文本和线条的垂直导航但是，我的导航中出现了一个小问题。当我在水平线旁边放置一些文本以创建导航链接时。文本大小将线推到右侧。

body {
  background-color: #663333;
}

#MainNavContainer {
  height: 100%;
}

.MainNav {
  list-style-type: none;
  float: right;
  line-height: 0 !important;
}

.MainNav li {
  margin: 5px;
}

.MainNav li a {
  display: inline-block;
}

.MainNav li a:after {
  content: "";
  display: table;
  clear: both;
}

.MainNav li a span {
  float: right;
  display: inline-block;
}

.NavLine {
  width: 40px;
  height: 2px;
  background-color: #FFFFFF;
  position: relative;
  clear: both;
}

.NavTxt {
  position: relative;
  font-family: Asap Condensed;
  font-weight: lighter;
  font-size: 14px;
  color: #FFFFFF;
  margin-right: 2px;
  margin-top: 1px;
}

<div id="MainNavContainer">
  <ul class="MainNav">
    <li>
      <a href="#">
        <span class="NavLine"></span>
        <span class="NavTxt">HOME</span>
      </a>
    </li>
    <li>
      <a href="#">
        <span class="NavLine"></span>
        <span class="NavTxt">SERVICES</span>
      </a>
    </li>
  </ul>
</div>

这是 CodePen 上的片段:

<https://codepen.io/ZedandWhite/pen/NaXqEL>

请给我一些代码来解决这个问题!

谢谢。

Answer 1

一个简单的解决方案。您可以通过将 min-width 或 width 设置为 .MainNav li a 来获得所需的输出。检查以下代码段。

body {
  background-color: #663333;
}

#MainNavContainer {
  height: 100%;
}

.MainNav {
  list-style-type: none;
  float: right;
  line-height: 0 !important;
}

.MainNav li {
  margin: 5px;
}

.MainNav li a {
  display: inline-block;
  min-width: 200px;
}

.MainNav li a:after {
  content: "";
  display: table;
  clear: both;
}

.MainNav li a span {
  float: right;
  display: inline-block;
}

.NavLine {
  width: 40px;
  height: 2px;
  background-color: #FFFFFF;
  position: relative;
  clear: both;
}

.NavTxt {
  position: relative;
  font-family: Asap Condensed;
  font-weight: lighter;
  font-size: 14px;
  color: #FFFFFF;
  margin-right: 2px;
  margin-top: 1px;
}

<div id="MainNavContainer">
  <ul class="MainNav">
    <li>
      <a href="#">
        <span class="NavLine"></span>
        <span class="NavTxt">HOME</span>
      </a>
    </li>
    <li>
      <a href="#">
        <span class="NavLine"></span>
        <span class="NavTxt">SERVICES</span>
      </a>
    </li>
  </ul>
</div>