Question

我正在尝试使用导航栏，但不确定如何在不使文本横向倒置的情况下将列表的一部分向右浮动。我希望第一个链接位于最左侧，而其余所有链接都位于右侧。另外，使用float：right使列表项非常压缩，我想知道如何克服这个问题？我选择以这种方式进行操作，以便将鼠标悬停在链接上时可以使用一行。 this

html：

<div class="navigationbar">
    <ul>

    <li class="one"><a href="#">Link 1</a></li>
   <li class="two rightside"><a href="#">Link 2</a></li>
   <li class="three rightside"><a href="#">Link 3</a></li>
   <li class="four rightside"><a href="#">Link 4</a></li>
    <li class="five rightside"><a href="#">Link 5</a></li>
  <li class="six rightside"><a href="#">Link 6</a></li>
      <hr />
    </ul>
  </div>

css：

ul li {
  display: inline;
  text-align: center;
}

a {
  display: inline-block;
  width: 16%;
  padding: .15rem 0;
  margin: 0;
  text-decoration: none;
  color: #fff;
  font-size: 1.5vw;
}

.two:hover ~ hr {
  margin-left: 16%;
}

.three:hover ~ hr {
  margin-left: 32%;
}

.four:hover ~ hr {
  margin-left: 48%;
}

.five:hover ~ hr {
  margin-left: 64%;
}
.six:hover ~ hr {
  margin-left: 80%;
}
hr {
  height: .25rem;
  width: 16%;
  margin: 0;
  background: blue;
  border: none;
  transition: .3s ease-in-out;
}
.navigationbar{
  background-color: green;
  overflow: hidden;
}
ul{
  margin:0.7vh 0vh 0.7vh 0vh;
}
/*
.rightside{
  float:right
}*/

谢谢

Answer 1

我认为这更接近您希望的目标。另外，使用边框底部是处理链接下划线的更好方法。它总是将自己完美地排列在内容之下。我还建议将字体大小从vw更改为px或em，并使用媒体查询来随着浏览器宽度变小/变大来更改字体。

编辑：这是我将纠正您的代码的方式，但我认为这不是完成此操作的正确方法。

ul li {
  display: inline;
  text-align: center;
  border-bottom:3px solid transparent;
}

a {
  display: inline-block;
  padding: .15rem 0;
  margin: 0;
  text-decoration: none;
  color: #fff;
  font-size: 1.5vw;
  padding:6px 15px; /*add more spacing to links*/
}
li:hover {
  border-bottom:3px solid blue;
}

.navigationbar{
  background-color: green;
  overflow: hidden;
}
ul{
  margin:0.7vh 0vh 0.7vh 0vh;
}

.leftside {
  float:left;
}

.right_side_container{
  float:right
}

<div class="navigationbar">
    <ul>
      <li class="one leftside"><a href="#">Link 1</a></li>
      <div class="right_side_container">
        <li class="two"><a href="#">Link 2</a></li>
        <li class="three"><a href="#">Link 3</a></li>
        <li class="four"><a href="#">Link 4</a></li>
        <li class="five"><a href="#">Link 5</a></li>
        <li class="six"><a href="#">Link 6</a></li>
     </div>
    </ul>
  </div>

Answer 2

您可以为浮动到右侧的每个链接设置一个width，这样就不会对其进行压缩

导航无法正确浮动

2 个答案: