浮動元素和頂部邊距

我遇到了一個小問題，我可以解決這個問題，但這讓我很煩惱，我不理解它。也許你可以幫忙。我有一個標題，裏面有一個導航欄，右邊是浮動的。現在，當我爲導航添加margin-top並將其設置爲等於10％時，它不會相對於父母身高進行調整。相反，它看起來更接近頁面。我的繼承人代碼：浮動元素和頂部邊距

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
html { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
body { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
header { 
 
    background-color: yellow; 
 
    height: 10%; 
 
    width: 100%; 
 
    overflow: hidden; 
 
} 
 
header img { 
 
    float: left; 
 
} 
 
nav { 
 
    float: right; 
 
    background-color: grey; 
 
    width: 30%; 
 
    text-align: center; 
 
    margin-top: 1%; 
 
} 
 
nav ul { 
 
    list-style-type: none; 
 
} 
 
nav ul li { 
 
    display: inline; 
 
}

<header> 
 
    <img src="" alt="Reece Barrett's" height="" width="" /> 
 

 
    <nav> 
 
    <ul> 
 
     <li><a href="#">About Me</a> 
 
     </li> 
 
     <!-- 
 
       --> 
 
     <li><a href="#">Porfolio</a> 
 
     </li> 
 
     <!-- 
 
       --> 
 
     <li><a href="#">Contact</a> 
 
     </li> 
 
    </ul> 
 
    </nav> 
 
</header>

來源

2016-11-01 Reece Barrett

爲什麼在'％'中需要'margin-top'？ –

@MuhammadUsman我是網絡開發新手，所以我不知道最佳實踐。我認爲這將有助於使頁面響應。我做錯了嗎？ –

您是否希望在標題中間保持導航，以便在％中使用保證金？ –

如果你想header進行自動高度，使用min-height而不是使用高度，同時刪除overflow:hidden否則將隱藏溢出內容。

header { 
    background-color: yellow; 
    min-height: 10%; 
    width: 100%; 
    overflow: hidden; 
}

來源

2016-11-01 07:10:48

您可以使用min-height: 10%

繼承人的小提琴：https://jsfiddle.net/a4sg5b72/

來源

2016-11-01 07:11:20

-1

你可以試試這個：

*{ 
 
margin: 0; 
 
padding: 0; 
 
} 
 
body{ 
 
width: 100%; 
 
height: 1000px; 
 
} 
 
header{ 
 
background-color: yellow; 
 
height: 10%; 
 
width: 100%; 
 
} 
 
header img{ 
 
float: left; 
 
} 
 
nav{ 
 
float: right; 
 
background-color: grey; 
 
width: 30%; 
 
text-align: center; 
 
margin-top: 10%; 
 
} 
 
nav ul{ 
 
list-style-type: none; 
 
} 
 
nav ul li{ 
 
display: inline; 
 
}

<!doctype html> 
 
<html lang="en"> 
 
<head> 
 
<meta charset="utf-8" /> 
 
<title>Home Page</title> 
 
</head> 
 
<body> 
 
    <header> 
 
     <img src="" alt="Reece Barrett's" height="" width="" /> 
 
     <nav> 
 
      <ul> 
 
       <li><a href="#">About Me</a></li> 
 
       <li><a href="#">Porfolio</a></li> 
 
       <li><a href="#">Contact</a></li> 
 
      </ul> 
 
     </nav> 
 
    </header> 
 
</body> 
 
</html>

這是因爲溢出：隱藏頭

來源

2016-11-01 07:17:21 followconscience

您可以嘗試我的代碼並查看它。祝你好運 – followconscience

我將接近它使用定位絕對&相對。 Codepen：http://codepen.io/rezasan/pen/YGmVGo

header { 
     background-color: yellow; 
     height: 10%; 
     width: 100%; 
     position:relative; 
    } 
    header img { 
     position:absolute; 
     left:0; 
     top:50%; 
     transform:translateY(-50%); 
    } 
    nav { 
     background-color: grey; 
     width: 30%; 
     text-align: center; 
     position:absolute; 
     right:0; 
     top:50%; 
     transform:translateY(-50%); 
    }

來源

2016-11-01 08:34:28

浮動元素和頂部邊距

回答

相關問題