Question

Pen在这里。

HTML

<header>
  <div id="logo-div">
    MyLogo
  </div>
  <nav>
    <ul class="nav-list">
      <li class="item">LINK #1</li>
      <li class="item">LINK #2</li>
      <li class="item">LINK #3</li>
      <li class="item">LINK #4</li>
      <li class="item">LINK #5</li>
    </ul>
  </nav>
</header>

CSS

header{
  display: inline-block;
  width: 90%;
}

#logo-div{
  margin-right: 50px;
  float: left;
  font-size: 28px;
  color: red;
  font-weight: 800;
  line-height: 60px;
}

nav{
  float: right;
}

.nav-list{
  display: flex;
  height: 150px;
  width: auto;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: flex-start;
  align-content: flex-start;
  margin: 0%;
  padding: 0%;
  width: auto;
  list-style-type: none;
}

.item{
  background-color: #d6315d;
  height: 50px;
  width: 150px;
  margin: 5px;
  text-align: center;
  line-height: 45px;
  font-weight: 600;
}

典型的网站标题，带有内联块显示，左侧徽标div，右侧导航栏。我需要具有可弯曲包装的导航栏，以适应各种设备宽度，至少直到屏幕宽度= 600像素（可以将其更改为汉堡包）为止。因此，我将导航列表高度设置为列表项高度的3倍。问题是，如果我将导航块浮动到标题内的右侧，则导航项列表将仅包装logo-div下的内容，而不是在其旁边。我可以通过从导航块中完全删除浮点数来解决此问题。但是现在导航块在缩放时向左漂移，因此整个页面看起来偏心。

有人有什么主意吗？

Answer 1

如果我的理解正确，那么屏幕较小时，项目将无法对齐。最好的方法是使用display: flex轻松完成对齐。我已经完成了一个示例代码，希望它可以解决您的问题（align-items-center在屏幕尺寸更改时将包括徽标在内的所有项目对齐到行的中心。如果不需要，可以将其删除）

HTML

<header>
  <div class="d-flex flex-row align-items-center">
    <div class="logo">
      MyLogo
    </div>
    <nav>
      <ul class="nav-list">
        <li class="item">LINK #1</li>
        <li class="item">LINK #2</li>
        <li class="item">LINK #3</li>
        <li class="item">LINK #4</li>
        <li class="item">LINK #5</li>
      </ul>
    </nav>
  </div>
</header>

CSS

.nav-list {
  display: flex;
  width: auto;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  align-content: flex-start;
  margin: 0%;
  padding: 0%;
  list-style-type: none;
}

.item {
  background-color: #d6315d;
  height: 50px;
  width: 150px;
  margin: 5px;
  text-align: center;
  line-height: 45px;
  font-weight: 600;
}

.d-flex {
  display: flex;
}

.flex-row {
  flex-direction: row;
}

.align-items-center {
  align-items: center;
}

.logo {
  margin-right: 50px;
  font-size: 28px;
  color: red;
  font-weight: 800;
}

JS小提琴链接：https://jsfiddle.net/SJ_KIllshot/7u36m194/

Flex Navbar失去居中

1 个答案: