我正在嘗試制作一個標題菜單，其右側有水平列表（導航區(qū)域或菜單），左側有 h1（網(wǎng)站名稱）（兩者都使用浮動標簽來執(zhí)行此操作）。我嘗試使用 header、nav 和 div 標簽將兩者分組在一起，但沒有任何效果。h1 和 ul 標簽就像是分開的，而不是分組的。當我給分組標簽（Div，標題，導航）背景顏色時什么也沒有發(fā)生，但是當我給它一個顏色時：....里面的所有文本都會改變顏色，所以至少可以。請幫我將 h1 和 ul 分組在一起。.header { width: 100%; background-color: aquamarine; color: red;}h1 { float: left;}ul { float: right; list-style: none; display: block;}ul li { display: inline-block;}<html><body> <header class="header"> <h1>website name</h1> <ul> <li>Home</li> <li>contact</li> </ul> </header></body></html>
3 回答
蕭十郎
TA貢獻1815條經(jīng)驗 獲得超13個贊
如上所述，當元素浮動時，它會從文檔的正常流程中取出（盡管仍然保留為文檔的一部分）。它向左或向右移動，直到接觸到其包含框或另一個浮動元素的邊緣。從父上下文中刪除浮動
意味著使用舊式CSS hacks（例如clearfixes），以使父元素“意識到”包含的浮動元素。
因此，為了防止出現(xiàn) Float 警告，只需重復使用更好但更簡單的方法：
CSS 彈性
display: flex;
.header {
? background-color: aquamarine;
? color: red;
? display: flex;
}
ul {
? list-style: none;
? display: flex;
? margin-left: auto;
}
li{
? padding: 1em;
}
<header class="header">
? <h1>website name</h1>
? <ul>
? ? <li>Home</li>
? ? <li>Contact</li>
? </ul>
</header>
繁星淼淼
TA貢獻1775條經(jīng)驗 獲得超11個贊
由于您使用的是浮動，因此您需要使用稱為clearfixhack 的東西。如果沒有，你可以將它們制作為display: inline-block
.header {
width: 100%;
background-color: aquamarine;
color: red;
}
h1 {
float: left;
}
ul {
float: right;
list-style: none;
display: block;
}
ul li {
display: inline-block;
}
.clearfix::after {
display: block;
content: "";
clear: both;
}
<html>
<body>
<header class="header clearfix">
<h1>website name</h1>
<ul>
<li>Home</li>
<li>contact</li>
</ul>
</header>
</body>
</html>
婷婷同學_
TA貢獻1844條經(jīng)驗 獲得超8個贊
使用浮動是相當繁瑣的工作，使用 Flexbox 制作導航欄。
.nav-wrapper
{
width:100%;
display:flex;
justify-content:space-between;
align-items:center;
}
.list-wrapper
{
width:50%;
display:flex;
justify-content: space-evenly;
align-items:center;
}
<div class="nav-wrapper">
<h1>Header</h1>
<ul class="list-wrapper">
<li>Home</li>
<li>Contact</li>
<li>About us</li>
</ul>
</div>
- 3 回答
- 0 關注
- 167 瀏覽
添加回答
舉報
0/150
提交
取消