右侧没有填充或边距,我不确定问题是否出在单位上
vw
但更改它没有用
我希望你是否可以自己尝试代码,看看你是否可以为我解决这个问题,让我能够在页面右侧有填充或边距。
* {
padding: 0;
margin: 0;
overflow-x: hidden;
}
header {
width: 100vw;
background-color: brown;
padding: 10px;
}
.logo-name-logo {
background-color: white;
display: flex;
width: 100%;
margin: 10px;
}
.flexitem {
border: 3px solid yellow;
background-color: aquamarine;
width: 200px;
}
.logo-1 {
min-height: 100px;
}
.name {
min-height: 100px;
}
.logo-2 {
min-height: 100px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Meshal</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<header>
<div class="logo-name-logo">
<div class="flexitem logo-1"></div>
<div class="flexitem name"></div>
<div class="flexitem logo-2"></div>
</div>
<div class="job-title"></div>
</header>
</body>
</html>
尝试使用 important in th css ! 像这样 : 边距:10px 重要;
* {
padding: 0;
margin: 0;
/* overflow: hidden; */
}
header {
width: 100%;
background-color: brown;
padding: 15px;
box-sizing: border-box; /* Added to manage the box size automatically*/
}
.logo-name-logo {
background-color: white;
display: flex;
width: 100%;
/* margin: 10px; */
}
.flexitem {
border: 3px solid yellow;
background-color: aquamarine;
width: 200px;
}
.logo-1 {
min-height: 100px;
}
.name {
min-height: 100px;
}
.logo-2 {
min-height: 100px;
}
有点不清楚你想要它看起来像什么,但我最好的猜测是类似于下面的代码片段。我认为您不需要
width: 100vw
或 width: 100%
规则。块元素将自然地占据整个水平宽度,在这种情况下将它们强制为 100% 可能会导致您的问题。
此外,如果您的目标是平均分配 flex 项目,请注意
flex: 1 1 auto
规则,而不是设置静态像素宽度。
* {
padding: 0;
margin: 0;
overflow-x: hidden;
}
header {
background-color: brown;
padding: 10px;
}
.logo-name-logo {
background-color: white;
display: flex;
margin: 10px;
}
.flexitem {
border: 3px solid yellow;
background-color: aquamarine;
flex: 1 1 auto;
}
.logo-1 {
min-height: 100px;
}
.name {
min-height: 100px;
}
.logo-2 {
min-height: 100px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Meshal</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<header>
<div class="logo-name-logo">
<div class="flexitem logo-1"></div>
<div class="flexitem name"></div>
<div class="flexitem logo-2"></div>
</div>
<div class="job-title"></div>
</header>
</body>
</html>