如何在导航保持全宽时使导航项居中？答案

【问题标题】：How to center navigation items while the nav remains full-width?如何在导航保持全宽时使导航项居中？
【发布时间】：2019-08-28 06:23:10
【问题描述】：

我的内容有限制（宽度为 1000 像素的 div）。我还有一个带有几个项目（徽标、导航列表和社交媒体图标）的固定导航。我需要导航保持整页（白色背景），但项目要在中心的 1000px 内居中（所以它是对称的）。

我尝试在标题中添加另一个 div 并将宽度设置为 1000 像素，但它破坏了我的整个标题。我尝试删除和添加边距和填充，但这不是一个永久的解决方案（在图标上添加填充权仅适用于一种尺寸的屏幕）。将 1000px 的 div 移到顶部会导致导航不是全角导航。

@import url('https://fonts.googleapis.com/css?family=Montserrat:500&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

li,
a {
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  font-size: 16px;
  text-decoration: none;
  color: black;
  padding: 0 0;
}

body {
  background: linear-gradient(to top, #007991, #78ffd6);
  background-repeat: no-repeat;
  background-attachment: fixed;
  margin: 0;
  padding-top: 65px;
}

header {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  padding: 0;
  background: white;
  position: fixed;
  top: 0;
  width: 100vw;
}

.navlinks {
  list-style: none;
}

.navlinks a {
  float: left;
  padding: 0 0;
}

.navlinks a {
  transition: all 0.1s ease 0s;
  line-height: 45px;
  display: inline-block;
  padding: 0 10px;
}

.navlinks a:hover {
  color: #000033;
  background: #73FAD3;
}

.Inhalt {
  background: white;
  width: 1000px;
  margin: auto;
  padding: 50px;
}

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>
  <header>
    <div class="header-branding">
      <img class="header-logo" src="" alt="LOGO">
    </div>
    <nav class="navlinks">
      <a href="#">Menu1</a>
      <a href="#">Menu2</a>
      <a href="#">Menu3</a>
      <a href="#">Menu4</a>
    </nav>
    <ul class="socialmediaicons">
      <a class="fa fa-facebook" href="#"></a>
      <a class="fa fa-twitter" href="#"></a>
      <a class="fa fa-spotify" href="#"></a>
    </ul>
  </header>
  <div class="Inhalt">
    <article>
      <h3>Article 1</h3>
      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
    </article>
  </div>
</body>

你可以在这里看到代码：

https://jsfiddle.net/h423L8ro/3/

如何让项目与 1000px div 对称？

【问题讨论】：

标签： html css

【解决方案1】：

我想这就是你想要的

我在你的标题中添加了一个 div，然后我给它添加了样式，这样它就不会破坏你的标题。

.navbar {
  width: 1000px;
  margin: auto;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
}

<header>
    <div class="navbar">
      <div class="header-branding">
        <img class="header-logo" src="" alt="LOGO">
      </div>
      <nav class="navlinks">
        <a href="#">Menu1</a>
        <a href="#">Menu2</a>
        <a href="#">Menu3</a>
        <a href="#">Menu4</a>
      </nav>
      <ul class="socialmediaicons">
        <a class="fa fa-facebook" href="#"></a>
        <a class="fa fa-twitter" href="#"></a>
        <a class="fa fa-spotify" href="#"></a>
      </ul>
    </div>
  </header>

此外，您应该将标题的宽度更改为 100% 而不是 100vw，因为 vw 不考虑滚动条的宽度。

【讨论】：

这正是我所需要的！太感谢了！这不仅是一个非常快的答案，而且是一个非常好的答案。我尝试了类似的方法，但没有成功。我想我用错了显示器。感谢您提供有关百分比的提示，将尝试这样做。

【解决方案2】：

将其宽度设置为(100/项目数)-(logowidth/项目数)%

因此，如果您将徽标宽度设置为 4%，您的菜单项将为 24%

.navlinks {
  list-style: none;
  width: 100%;
}
.header-logo {
  width:4%;
}
.navlinks a {
  transition: all 0.1s ease 0s;
  line-height: 45px;
  display: inline-block;
  width: 24%;
  text-align:center;
  padding: 0 10px;
}

检查这个：jsfiddle

【讨论】：

可悲的是，这根本不适合我。它破坏了间距，就像我第一次尝试一样。但请查看@Felipe Yáñez 的回答，这正是我想要的。无论如何，感谢您的快速响应并尝试修复它。

【解决方案3】：

不要使用 px 中的宽度，而是尝试使用百分比。要制作动态和响应式站点（根据设备），您需要以百分比声明尺寸（首选）。试试看：

{
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
display: inline-block;
align-items: center;
justify-content: space-between;
}

【讨论】：

【解决方案4】：

我一直更喜欢这种实现方式，但它更像是一种偏好。

.navbar {
    clear: both;
}

.header-branding {
    float: left
}

.navlinks {
    display: block;
    text-align: center;
}

.navlinks a {
    display: inline-block;
}

.socialmediaicons {
    float: right;
    margin: 0;
    padding: 0;
}

.socialmediaicons a {
    display: inline-block;
    width: 25px;
    height: 25px;
    background: #f5f5f5;
}

<header>
    <div class="navbar">
        <div class="header-branding">
            <img class="header-logo"  width="50" src="http://www.nashikproperty.com/uploads/builder-logo/default-logo.png" alt="LOGO">
        </div>
        <ul class="socialmediaicons">
            <a class="fa fa-facebook" href="#"></a>
            <a class="fa fa-twitter" href="#"></a>
            <a class="fa fa-spotify" href="#"></a>
        </ul>
        <nav class="navlinks">
            <a href="#">Menu1</a>
            <a href="#">Menu2</a>
            <a href="#">Menu3</a>
            <a href="#">Menu4</a>
        </nav>
    </div>
</header>

【讨论】：