Question

我遇到了header.main-header元素的问题。标头在视口中不可见。我插入了一个高度值以使其可见。有人可以帮助我并解释在没有插入高度时它不可见的原因。

.main-header {
  background: yellow;
  padding: 0 3em;
  position: absolute;
  width: 100%;
  top: 0;
  height: 85px;
}

ul {
  padding: 0;
  list-style: none;
}

.main-nav {
  position: relative;
}

.nav-left {
  float: left;
}

.nav-right {
  float: right;
}

.middle {
  position: absolute;
  left: 50%;
  transform: translate(-50%,0);
}

.nav-right li {
  display: inline-block;
}

<header class="main-header">
 <nav class="main-nav">
  <ul class="nav-left">
   <li><a href="">Try Dropbox Business</a></li>
  </ul>

 <div class="middle">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/47/Dropbox_logo_%28September_2013%29.svg/200px-Dropbox_logo_%28September_2013%29.svg.png" alt="Dropbox Logo" />
 </div>

  <ul class="nav-right">
   <a href="#">Download the app</a>
   <li><a href="#">Sign in</a></li>
  </ul>
 </nav>
</header>

这是我在Codepen的工作： http://codepen.io/marcvs/pen/Gjwdov?editors=1100

此外，关于导航内部元素的定位，我尽力将元素从左/中/中间定位。但是导航栏的右侧向右延伸，它给出了一个底部滚动条。摆放元素的最佳技巧是什么？

请给我提示改进我的工作。谢谢。

Answer 1

您无需添加太多样式来完成该标题：

首先查看您的main-header标记。如果主标题的宽度是页面的100％，子块导航也将是100％。

现在，使用百分比，使菜单适合标题。导航中有3个孩子，因此您可以将每个宽度设置为宽度的1/3，这样可以使它们合适。请记住边框和填充计数（每个都尝试30％的宽度，让它们浮动：留在所有3个孩子上）。

Answer 2

You need to put clear after last ul where is float:right;

Because you have float, and parent element doesn't have height when float is there.

So after last ul put div class="clear" with css .clear {clear:both;}

Or if you are using bootstrap you have class clearfix. pun in nav class="main-nav clearfix"

导航中的标题容器不可见

2 个答案: