導航中的頁眉容器不可見

我遇到了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

另外，關於導航裏面的元素的定位，我盡我所能左/中心元素定位/中間。但是導航欄的右側向右延伸，並提供了一個底部滾動條。什麼是最好的技術來確定元素？

請給我提示，以改善我的工作。謝謝。通過看你的主標題標籤

開始：

來源

2016-10-20 marcvs

你並不需要添加這麼多的風格來完成這個頭。如果主標題的寬度爲頁面的100％，則子塊導航也將爲100％。

現在，使用百分比，使菜單適合標題。 nav中有3個孩子，所以你可以將每個寬度設置爲寬度的1/3，這應該使它們適合。請記住邊框和填充數量（每個都嘗試30％的寬度，讓他們在float中：所有3個孩子都留下）。

來源

2016-10-20 14:04:06 rtrigoso

謝謝。它也可以。你能否再次檢查我的codepen。我使用了你提供的技術，但我不明白爲什麼在導航欄的右側有一個空格，並且它向右延伸得很遠。 – marcvs

你能更具體嗎？我不確定你提到的空間。 – rtrigoso

Sorrly回覆晚。我的問題已經解決。我感謝你的時間。謝謝：） – marcvs

 
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"

來源

2016-10-20 13:36:39

謝謝你的幫助，它的工作原理。我用codepen更新了它。還有一個問題，導航的右側向右延伸。 – marcvs

導航中的頁眉容器不可見

回答

相關問題