gpt4 book ai didi

HTML CSS Nav 获取表格的顶部边距

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

我有一个 SideNav,它是 position: absolute; 并且填充了屏幕的所有左侧,我的 table 在屏幕中间,但是如果我想应用 margin -top:50px; SideNav 也得到它。

如果我删除 position 它可以工作,但它不能再填充所有左侧。

我不知道为什么会这样,谢谢你的帮助。

Web page with the issue

body{
height: 100vh;
margin: 0;
padding: 0;
background-color: #F5F5F5;
}

.App {
text-align: center;
}

.App-logo {
animation: App-logo-spin infinite 20s linear;
height: 80px;
}

.App-header {
background-color: #222;
height: 150px;
padding: 20px;
color: white;
}

.App-title {
font-size: 1.5em;
}

.App-intro {
font-size: large;
}

table {
text-align: center;
width: 500px;
margin:auto;
margin-right: 40%;
border-color: #0585e1;
border-width: 1px;
border-style: groove;
padding: 20px 0;
background-color: #c9d4e8;
border-radius: 3px;
margin-top: 10px;
}

table input {
width: 200px;
border-color: #0585e1;
border-style: groove;
padding: 4px;
font-size: 13px;
background-color: #c9d4e8;
color: #0585e1;
margin:3px 0;
}

table td {
color: #0585e1;

}

button {
color: #0585e1;
background-color: #c9d4e8;
margin-top: 15px;
cursor: pointer;
width: 150px;
font-size: 15px;
border-color: #0585e1;
border-style: groove;
}

#navigator {
background: #354256;
color: #0585e1;
height: 100%;
position: absolute;
}

最佳答案

而不是应用 margin-top: 50px;给你的<body>元素,应用:

padding-top: 50px;

此外,除了声明 position: absolute对于 #navigator ,理想情况下,您应该提供明确的坐标。

例如

#navigator {
position: absolute;
top: 0;
left: 0;
height: 100%;
color: #0585e1;
background-color: #354256;
}

关于HTML CSS Nav 获取表格的顶部边距,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50818341/

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