gpt4 book ai didi

html - 在 html/css 中定位元素

转载 作者:太空宇宙 更新时间:2023-11-04 11:34:44 26 4
gpt4 key购买 nike

我正在尝试使用 jfiddle 学习 HTML 的一些基础知识。这就是我所做的。

https://jsfiddle.net/Lqn0jch3/

HTML

<body>
<div class="container">
<div class="sidebar">
<div class="logo"></div>
<div class="menu-options">
<p>yeeeeeep</p>
</div>
</div>
</div>
</body>

CSS

html, body {
height: 100%;
overflow-y: hidden;
}
.container {
background-color : #458748;
height: 100%;
}
.sidebar {
height: 100%;
width: 30%;
background-color : #000000;

}
.logo {
background-image: url("https://upload.wikimedia.org/wikipedia/en/thumb/3/31/Britannia_Industries_Logo.svg/1280px-Britannia_Industries_Logo.svg.png");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
height: 30%;
width: 100%;
text-align: center;
background-color: aqua;


}
.menu-options {
background-color: #FFFFFF;
}
p {
color: #000000;
}

但我不明白为什么我的“菜单选项”类没有位于 Logo 正下方并且它们之间有一些分隔。

提前致谢。

最佳答案

这是你想要的吗?

https://jsfiddle.net/Lqn0jch3/1/

我改变了p的css

p {
display: inline-block;
color: #000000;
}

元素<p>默认情况下变为边距,因此更改其显示或设置 margin: 0px;会为你做这份工作

关于html - 在 html/css 中定位元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31820977/

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