如何使导航栏以不同的分辨率居中？答案

【问题标题】：How to center a navbar on a different resolution?如何使导航栏以不同的分辨率居中？
【发布时间】：2016-06-26 11:14:30
【问题描述】：

所以经过数小时的搜索后，我仍然无法找到解决我愚蠢问题的方法，我是新手，但在我的主显示器上它居中就好了

1920x1080： Larger image

但是我的 1280x1024： Smaller image

所以你可以看到它很不平衡所以这是我的网站代码..

/*---Start Navbar---*/

.nav-main {
  display: block;
  list-style: none;
  position: relative;
  width: 100%;
  height: 70px;
  /* Adds shadow to the bottom of the bar */
  -webkit-box-shadow: 0px 0px 8px 0px #000000;
  -moz-box-shadow: 0px 0px 8px 0px #000000;
  box-shadow: 0px 0px 8px 0px #000000;
  /* Adds the transparent background */
  background-color: rgba(1, 1, 1, 0.8);
  color: rgba(1, 1, 1, 0.8);
}
.nav-logo {
  float: left;
  height: 40px;
  padding: 15px 20px;
  line-height: 60px;
  display: inline-block;
  list-style-type: none;
}
ul {
  text-align: center;
  position: relative;
  margin: 0;
  padding: 0;
  float: left;
  left: 30%;
  list-style-type: none;
  display: inline-block;
}
ul li {
  float: inherit;
}
.nav-item {
  display: inline-block;
  list-style-type: none;
  padding: 15px 20px;
  height: 40px;
  width: auto;
  line-height: 50px;
  color: #fff;
  text-decoration: none;
}
li a:hover {
  background-color: #444;
}
/*---End Navbar---*/

<nav class="nav-main">
  <ul>
    <li>
      <a href="http://phalanxgaming.org/" class="nav-logo" target="_blank">
        <img src="http://i.imgur.com/sg5DZao.png?2" alt="logo" style="width:60px;height:60px;">
      </a>
    </li>
    <li>
      <a href="https://docs.google.com/forms/d/1ukgWHC3_xFmkxiCEhb-ZN9dYw2kHWQEyo_inPW7u0mw/viewform?usp=send_form" class="nav-item" target="_blank">CONTACT US</a>
    </li>
    <li>
      <a href="ts3server://tsgb1.vilayer.com:10022/?nickname=" class="nav-item">TEAMSPEAK</a>
    </li>
    <li>
      <a href="https://www.paypal.me/PhalanxGaming" class="nav-item" target="_blank">DONATE</a>
    </li>
    <li>
      <a href="http://steamcommunity.com/groups/P-GC" class="nav-item" target="_blank">STEAM</a>
    </li>
    <li>
      <a href="http://www.twitch.tv/phalanxgamingofficial/" class="nav-item">TWITCH</a>
    </li>
  </ul>
</nav>

任何和所有的支持都很棒，对于含糊不清的问题，我很抱歉，我无法入睡，直到我解决了这个问题。

【问题讨论】：

标签： html css center navbar

【解决方案1】：

您需要做的是内联显示您的列表元素。所以设置

ul li {
/*  float: inherit; */
display: inline;
}

之后，只需删除ul 样式中的float 和left 属性，并将.nav-mains height 设置为auto。

检查this。

【讨论】：

这比我的解决方案更好，+1

【解决方案2】：

将它包装在一个 div 中并使用 width:auto 怎么样？ http://www.456bereastreet.com/lab/width-auto/

【讨论】：

【解决方案3】：

首先，删除

left: 30%;

来自

ul {...}

然后改变这个：

ul li {
    display: inline-block;
    vertical-align: middle;
}

【讨论】：