Html <；导航>；元素溢出<；标题>；

元素即使嵌套在

元素中，也不会在该元素中呈现

我尝试使用

索引头

类将

over flow:hidden

属性添加到

元素中。我还尝试添加了

position:relative

和

position:absolute

*{
保证金：0；
填充：0；
}
保险商实验室{
列表样式：无；
}
a{
文字装饰：无；
}
.索引头{
高度：90px；
宽度：100%；
背景色：#000；
溢出：隐藏；
}
.标志{
宽度：50px；
浮动：左；
利润率：20px；
右边距：0；
}
.名牌{
颜色：#ffc107；
线高：90px；
字体系列：“双体船”，无衬线；
}
.索引头导航{
浮动：对；
边际上限：0；
宽度：50%；
}
.索引头导航ul li{
列表样式：无；
显示：内联块；
字体大小：25px；
左侧填充：50px；
}

Eeat

因为您在标题中添加了一个“h1”标记，默认情况下，该标记具有

display: block

属性，该属性将元素拉伸到“header”元素的整个宽度

要解决此问题，必须向“h1”元素添加css规则

---

jsiddle link:

在

中获取

的最简单方法是将

元素设置为

显示：内联块

。默认情况下，浏览器代理将

标记设置为

display:block

，该标记覆盖了这些元素100%的可用空间，在这种情况下，是将您的

向下推。由于

有一个固定的高度，这迫使

向外移动

我还补充说

display: flex;
align-items: center;
justify-content: space-between;

到

以在垂直和水平方向上均匀地间隔子元素

然后我添加了

flex-grow:1

到

元素，当flex box确定其相对于同级的宽度时，该元素确保它具有“优先级”

了解更多关于

*{
保证金：0；
填充：0；
}
保险商实验室{
列表样式：无；
}
a{
文字装饰：无；
}
.索引头{
高度：90px；
宽度：100%；
背景色：#000；
溢出：隐藏；
显示器：flex；
对齐项目：居中；
证明内容：之间的空间；
}
.标志{
宽度：50px；
浮动：左；
利润率：20px；
右边距：0；
}
.名牌{
颜色：#ffc107；
线高：90px；
字体系列：“双体船”，无衬线；
显示：内联块；
}
.索引头导航{
浮动：对；
边际上限：0；
宽度：50%；
柔性生长：1；
}
.索引头导航ul li{
列表样式：无；
显示：内联块；
字体大小：25px；
左侧填充：50px；
}

Eeat

对不起，我不是有意篡夺你的权利的！在你发帖之前我一定已经开始了。只留下我的答案，因为还有一些事情需要解决。

display: flex;
align-items: center;
justify-content: space-between;