Навигация не плавает правильно

Question

Я экспериментирую с панелью навигации, и я не уверен, как перемещать часть списка вправо, без переворачивания текста вбок.Я хочу, чтобы первая ссылка была на самой левой стороне, а все остальные ссылки - на правой стороне.Кроме того, использование float: right делает элементы списка очень сжатыми, и мне было интересно, как обойти это?Я решил сделать это таким образом, чтобы при наведении курсора на ссылки можно было использовать строку.https://codepen.io/anon/pen/xQjozy

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

Вы можете установить определенный width для каждой из ссылок, которые вы перемещали вправо, таким образом, он не будет сжат

Answer 2

Я думаю, что это ближе к тому, что вы хотите, я надеюсь.Также использование нижней границы - лучший способ подчеркнуть подчеркивание ссылки.Он всегда будет идеально соответствовать содержанию.Я бы также предложил изменить размер шрифта с 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>