页面右侧没有填充或边距



右边没有填充或边距,我不确定问题是否与单位vw有关,但改变它不起作用

我希望如果你可以尝试代码自己,看看你是否可以解决它为我能够有padding或margin在页面的右侧。

* {
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>

* {
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: 100vwwidth: 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>

尝试在css中添加重要元素!像这样:

最新更新