gpt4 book ai didi

html - 无法让 div 保持内联或正确扩展

转载 作者:太空宇宙 更新时间:2023-11-03 17:32:30 25 4
gpt4 key购买 nike

我从头开始使用一个新的、更高效的菜单布局。
但是,在我遇到另一个问题之前,我认为我已经成功了。我附上了一张不应该发生的事情的图片:link .

我需要的是无论窗口大小如何,这个灰色菜单栏中的所有内容都保持对齐

在相同情况下,红色的所有内容都保持一致。

这是我的代码:

<style>
* {
overflow: hidden;
padding: 0;
margin: 0;
}

.menuHead {
border: 2px solid black;
background: #666;
/*inline block padding fix*/
font-size: 0;
}

.menuHeadElement {
display: inline-block;
}

.siteLogo {
border: 2px solid white;
margin-left: 3%;
position: relative;
}

.menuBar {
border: 2px solid red;
color: white;
margin-left: 3%;
position: relative;
}

.menuSelection {
font-size: 20px;
display: inline-block;
border: 2px solid blue;
height: 25px;
width: 150px;
margin-right: 3%;
text-align: center;
}

</stlye><body><div class="menuHead"><div class="siteLogo menuHeadElement"><a href="#"><img src="media/images/site/npLog.png" height="160px"></img></a></div><div class="menuBar menuHeadElement"><div class="menuSelection">Home </div><div class="menuSelection">About </div><div class="menuSelection">Contact </div><div class="menuSelection">Gallo </div></div></div><div class="bgVid"><video id="mnScrnVid" src="media/video/WebVid.mp4" autoplay muted/></div></body>

似乎红色的 div menuBar 只扩展到一定数量,然后开始包裹 float 在其中的所有内容。难倒了。

最佳答案

您正在使用 px 分配宽度。

尝试使用 width: 10%;width:30%;这样一来,当您调整窗口大小时,它将始终占据屏幕宽度的百分比。不是集合 PX

关于html - 无法让 div 保持内联或正确扩展,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30270614/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com