垂直导航与文本推动问题

Question

我想用文本和文本旁边的行进行垂直导航但是，我的导航中有一点问题。当我在水平线旁边放一些文字来制作导航链接时。文本大小将Line推到右侧。

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

如果弹性盒可以接受，以下解决方案是否足够？

.MainNav li a {
    /* change the properties to the following instead of inline block */
    width: 100%;
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-start;
}

body {
  background-color: #663333;
}

#MainNavContainer {
  height: 100%;
}

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

.MainNav li {
  margin: 5px;
  padding-bottom: 10px;
}

.MainNav li a {
  width: 100%;
  //display: inline-block;
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-start;
}

.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>

Answer 2

一个简单的解决方案。您可以通过将301或min-width设置为width来获得所需的输出。请查看下面的代码段。

＆＃13;

＆＃13;

.MainNav li a

＆＃13;

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;
}

＆＃13;

＆＃13;

＆＃13;