英文:
CSS element moving
问题
你好，我从开始进行网页开发以来就一直遇到这个问题。当我放大页面时，容器也会移动。有没有办法解决这个问题？
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.darkslidecont{
width: 200px;
height: 50px;
position: relative;
background-color: white;
left: 80%;
display: block;
flex-wrap: flex;
}
<!-- language: lang-html -->
<header>
<h1 id="welcomeText"><u>Welcome to My Portfolio!</u></h1>
<div class="darkslidecont">
</div>
</header>
<!-- end snippet -->
我已经尝试过更改位置和显示属性，但没有成功。
英文:
Hello I have had this issue since the beginning of my web development start. When I zoom in the container moves in too. any way i can solve this?
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.darkslidecont{
width: 200px;
height: 50px;
position: relative;
background-color: white;
left: 80%;
display: block;
flex-wrap: flex;
}
<!-- language: lang-html -->
<header>
<h1 id="welcomeText"><u>Welcome to My Portfolio!</u></h1>
<div class="darkslidecont">
</div>
</header>
<!-- end snippet -->
I have played around with the positions and display but no luck
答案1
得分: 0
重置 CSS
* {
margin: 0;
padding: 0;
}
.darkslidecont {
width: 200px;
height: 50px;
position: relative;
background-color: white;
left: 80%;
display: block;
flex-wrap: flex;
}
<header>
<h1 id="welcomeText"><u>Welcome to My Portfolio!</u></h1>
<div class="darkslidecont">
</div>
</header>
英文:
Reset css
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
* {
margin: 0;
padding: 0;
}
.darkslidecont{
width: 200px;
height: 50px;
position: relative;
background-color: white;
left: 80%;
display: block;
flex-wrap: flex;
}
<!-- language: lang-html -->
<header>
<h1 id="welcomeText"><u>Welcome to My Portfolio!</u></h1>
<div class="darkslidecont">
</div>
</header>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论