标头CSS样式间距 [英] Header CSS styling spacing
问题描述
我有一个相当简单的标头，尽管我发现RWD允许标头在任何地方工作并获得整个页面的外观，但我可以按照自己想要的方式查看该页面，从而使页面看起来更加井井有条.我现在正在尝试在网格轨道内使用带有flexbox的网格模板，而我的标题不喜欢我想要链接之间的间隙的情况.我创建了一个js小提琴 https://jsfiddle.net/Arandolph01/vp8xnrmL/2/ 我认为这是最好的响应式Web设计，当更改屏幕尺寸时，我会不断获得徽标，并且图像几乎完全消失. 我已经使用了正确的指标和自动的位置以及最新的布局，因此请为我补充.
I have a fairly simple header that I can get to look the way I want though I found that for my RWD to allow the header to work anywhere and to get the look for the whole page that want a more organized look to webpage. I am now trying the grid-template with the flexbox within the grid tracks and my header doesn't like when I want the gap between the links. I created a js fiddle https://jsfiddle.net/Arandolph01/vp8xnrmL/2/ I idea is the best Responsive Web Design and I keep getting the logo and the image disappearing almost completely when I change the size of the screen. I have used the right metrics and auto where it says along with latest layouts so appreciate filling me in.
更新
.nav_menu a {
margin: 1em 3.7em;
}
body {
background-image: url(https://i.imgur.com/sCfeeeY.png),url(https://i.imgur.com/sCfeeeY.png) ;
background-position: top 1em right 1em, bottom 1em left 1em;
background-repeat: no-repeat;
}
.row {
flex: 2 auto;
grid-column: 1 30em;
display: flex;
margin: auto;
}
.active {
margin: 1em;
}
.fullwebpage .section {
display: grid;
grid-template-rows: 1fr 1fr auto auto 1fr 1fr;
grid-template-columns: minmax(40em, 25%) 1fr;
grid-column: 1;
flex: 0 1 28em;
}
.sectionheader {
display: flex;
flex: 8 auto;
grid-row: auto 1;
width: 100%;
margin: 1em;
margin-right: 3em;
}
.sectionfirst {
padding-top: 5em;
}
.nav_menu {
margin-right: 4em;
}
.nav_menu {
float: left;
justify-content: space-around;
text-decoration: none;
font-family: Verdana;
font-weight: bold;
display: flex;
z-index: 1;
}
.wrap {
display: inline-flex;
width:100%;
margin-top:2em;
}
.wrap a {
display: flex;
flex: 3 auto;
flex-flow: row;
grid-row: 1;
float: start;
color: black;
text-decoration: none;
font-size: 17px;
}
.wrap#gsbutton {
padding-top: .5em;
padding-right: 0;
padding-left: 0;
margin-right: 3em;
margin-left: 0em;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Frontend Challenge Developer Website</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
<link rel="stylesheet" type="text/css" href="attributes.css">
</head>
<body>
<section>
<section class="row header" id="sectionheader">
<!-- page bar header navigation tabs -->
<div class="head_bg">
<div class="wrap">
<div class="logo">
<a href="index.html">
<img src="https://i.imgur.com/4kctnTg.png"></img>
</a>
</div>
<nav class="nav_menu">
<a class="active" href=""><!--index.html-->Home</a>
<a class="active" id="pricingheader" href=""><!--pricing.html-->Pricing</a>
<a class="active" href=""><!--products.html-->Products</a>
<a class="active" href=""><!--aboutus.html-->About Us</a>
<a class="active" href=""><!--community-->Community</a>
</nav>
<a class="gsbutton" id="gsbutton" href="">
<img src="https://i.imgur.com/XZY4xX0.png" alt="">
</a>
</div>
</div>
</section>
</body>
</html>
我希望该部分的间隔为1-3em.
I want the section to be spaced by 1-3em.
推荐答案
在子元素上设置margin，而不是在弹性项目上设置padding.
Set margin on the child element instead of padding on your flex item.
.nav_menu a {
margin: 0 1em;
}
结帐示例
这篇关于标头CSS样式间距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
