Question

所以经过几个小时的搜索后，我仍然无法找到适合我的傻瓜，我是新手，但是在我的主显示器上它很好地中心

1920×1080： Larger image

但是我的1280x1024： Smaller image

因此，您可以看到它不平衡，所以这里是我的网站代码..

＆＃13;

/*---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---*/

＆＃13;

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

＆＃13;

任何和所有的支持都是伟大的，抱歉抱怨我很累，我无法入睡直到我解决这个问题。

Answer 1

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

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

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

检查this。

Answer 2

如何将它包装在div中并使用width：auto？ http://www.456bereastreet.com/lab/width-auto/

Answer 3

首先，删除

left: 30%;

来自

ul {...}

然后改变这个：

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

如何将导航栏置于不同的分辨率中心？

3 个答案: