javascript - 尝试修复时菜单项显示不正确和对齐方式发生变化的问题

Question

我在菜单图标右对齐时遇到问题。

到目前为止，我的 Logo 在左侧，菜单图标在右侧，但它们的顺序是相反的。而不是家庭、投资组合、联系人，它显示为联系人、投资组合、家庭。我明白这是因为 li 被设置为向左浮动。但是，当我将链接向右浮动以使它们以正确的顺序显示时，整个链接菜单将向左移动，在最后一个链接的右侧留下很大的空隙。 (我希望链接显示在标题浏览器窗口的最右侧，而我的 Logo 显示在最左侧)。在我尝试修复链接的顺序时，我弄乱了它们在标题中的位置。

目前它针对移动设备进行了优化，重新调整窗口大小将创建一个汉堡包图标，并且菜单会下拉，文本居中居左。我希望它保持不变，我只希望我的链接以正确的顺序定位，并以正确的顺序在浏览器窗口中尽可能靠右。

我还有一个 friend (使用更大的显示器)让链接显示在标题中间，我不确定为什么会这样，因为它们在我的屏幕上显示正确。

任何帮助将不胜感激:D带预览的 Codepen 在这里； http://codepen.io/AnishaDesigns/pen/wdzNQq

*{
margin: 0px;
padding: 0px;
}

@font-face {
font-family: 'Coolvetica'; /*Font name*/
src: url('coolvetica.ttf'); /*URL to font*/
}

body {
  background-color: #E6E9EC;
}
ul {
  float: right;
  list-style: none;
  width: 50%;
  height: 60px;
  padding: 0px;
  font-family: 'coolvetica';
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 5px;
}

li{
  display: inline;
  float: right;
  width: auto;
  height: 60px;
  background: #A62841;
  margin-right: 20px;

}
li a{
  display: block;
  float: left;
  height: 60px;
  line-height: 60px;
  padding: 0 5px;
  color: #E6E9EC;
  text-decoration: none;
}

header {
  float: left;
  width: 100%;
  height: 60px;
  background-color: #A62841;
}

header #branding{
  margin:0px;
  padding: 10px 0px 5px 20px;
  float: left;
}

@media (max-width: 768px){

.menu-icon{
  display: block;
  width: 32px;
  height: 32px;
  background:url("images/menu-icon.svg") no-repeat center;
  position: absolute;
  top: 13px;
  right: 16px;
  }

header nav ul{
  overflow: hidden;
  height: 0px;
  width: 100%;
  background: #A62841;
  padding: 0px;
  margin: 0px;
}

header nav ul.open{
  height: auto;
}

h1{
  width: 100%;
  float: left;
  margin-left: 20px;
}

header nav ul li {
  width: 100%;
  height: 50px;
  margin-right: 0px;
  margin-bottom: 10px;

}
header nav ul li a {
    width: 100%;
    float: left;
    margin-left: 20px;
    line-height: 50px;
}
header{
  height: 60px;
  width: 100%;
}
}

Answer 1

我已经编辑了代码并添加了 float:left;到 li 并更改为 width: auto;对于 ul。

ul {
  float: right;
  list-style: none;
  width: auto;
  height: 60px;
  padding: 0px;
  font-family: 'coolvetica';
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 5px;
}

li{
  display: inline;
  float: left;
  width: auto;
  height: 60px;
  background: #A62841;
  margin-right: 20px;
}

http://codepen.io/athira151292/pen/JNRzjo