我正在尝试制作一个标题菜单，其右侧有水平列表（导航区域或菜单），左侧有 h1（网站名称）（两者都使用浮动标签来执行此操作）。我尝试使用 header、nav 和 div 标签将两者分组在一起，但没有任何效果。h1 和 ul 标签就像是分开的，而不是分组的。当我给分组标签（Div，标题，导航）背景颜色时什么也没有发生，但是当我给它一个颜色时：....里面的所有文本都会改变颜色，所以至少可以。请帮我将 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条经验 获得超12个赞
如上所述，当元素浮动时，它会从文档的正常流程中取出（尽管仍然保留为文档的一部分）。它向左或向右移动，直到接触到其包含框或另一个浮动元素的边缘。从父上下文中删除浮动
意味着使用旧式CSS hacks（例如clearfixes），以使父元素“意识到”包含的浮动元素。
因此，为了防止出现 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条经验 获得超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条经验 获得超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 关注
- 70 浏览
添加回答
举报
0/150
提交
取消