Question

我创建了一个flexbox网站，但出于某种原因，导航不会以全蓝色背景颜色显示，而是以中心框显示：

我还需要这个导航背景粘，但不知道该怎么做

这是我这部分的CSS：

.name {
    font-size: 1.35em;
    margin: 0;
}
.main-nav {
    margin-top: 5px;
}
.name a,
.main-nav a {
    text-align: center;
    display: block;
    padding: 10px 15px;
}
.main-nav a {
    font-size: .95em;
    color: #3acec2;
    text-transform: uppercase;
}
.main-nav a:hover {
    color: #093a58;
}



/* ---- Layout Containers ---- */

.main-header {
    padding-top: .5em;
    padding-bottom: .5em;
    background-color: red;
}
.banner,
.main-footer {
    text-align: center;
}
.banner {
    color: #fff;
    background-color: #18bc9c;
    padding: 6.5em 0;
    margin-bottom: 32px;
}
.col {
    padding-right: 1em;
    padding-left: 1em;
}
.main-footer {
    background: #d9e4ea;
    padding: 2em 0;
    margin-top: 30px;
}

/* ---- Page Elements ---- */

.logo {
    width: 256px;
}
.headline,.tagline {
    margin: 0;
    color: #fff;
}
.feat-img {
    border-radius: 5px;
}

您可以访问JSFIDDLE网站上的示例FLexbox：https://jsfiddle.net/6qg5vuux/3/

你知道如何解决它并让它变粘吗？

Answer 1

您可以将ID添加到header，然后添加以下CSS：

#header{
  width: 100%;
  background-color: darkblue;
}

我设置了ID，因为它的specificity更高。您也可以使用!important exception执行此操作，但不建议这样做，并且滥用它不是一个好主意。

另外，请删除媒体查询中的max-width媒体资源。

/* ================================= 
  Base Element Styles
==================================== */

* {
	box-sizing: border-box;
}
body {
	font-family: 'Montserrat', sans-serif;
	line-height: 1.5;
	color: #e74c3c;
	margin: 0;
}
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

p {
	font-size: .95em;
}

h1{
	font-size: 4em;
}

h2,
h3,
a {
	color: #093a58;
}
h2,
h3 {
	margin-top: 0;
}
a {
	text-decoration: none;
}
img {
	max-width: 100%;
}

/* ================================= 
  Base Layout Styles
==================================== */

/* ---- Navigation ---- */

.name {
	font-size: 1.35em;
	margin: 0;
}
.main-nav {
	margin-top: 5px;
}
.name a,
.main-nav a {
	text-align: center;
	display: block;
	padding: 10px 15px;
}
.main-nav a {
	font-size: .95em;
	color: #3acec2;
	text-transform: uppercase;
}
.main-nav a:hover {
	color: #093a58;
}



/* ---- Layout Containers ---- */

#header{
  width: 100%;
  background-color: darkblue;
}
.main-header {
	padding-top: .5em;
	padding-bottom: .5em;
	background-color: red;
}
.banner,
.main-footer {
	text-align: center;
}
.banner {
	color: #fff;
	background-color: #18bc9c;
	padding: 6.5em 0;
	margin-bottom: 32px;
}
.col {
	padding-right: 1em;
	padding-left: 1em;
}
.main-footer {
	background: #d9e4ea;
	padding: 2em 0;
	margin-top: 30px;
}

/* ---- Page Elements ---- */

.logo {
	width: 256px;
}
.headline,.tagline {
	margin: 0;
	color: #fff;
}
.feat-img {
	border-radius: 5px;
}


/* ================================= 
  Media Queries
==================================== */

@media (min-width: 769px) {
	.main-header,
	.row,
  .footer-inner{
		width: 80%;
		margin: 0 auto;
	}
	.tagline {
		font-size: 1.4em;
	}
}


/* ================================= 
  Base Styles
==================================== */

body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.row {
	flex: 1;
}

/* ================================= 
  Media Queries
==================================== */

@media (min-width: 769px) {

	.main-header,
	.main-nav {
		display: flex;
	}
	.main-header {
		flex-direction: column;
		align-items: center;
	}

}

@media (min-width: 1025px) {

	.main-header {
		flex-direction: row;
		justify-content: space-between;
	}

}

<header id="header" class="main-header">
		<h1 class="name"><a href="#">MY SITE</a></h1>
		<ul class="main-nav">
			<li><a href="#">Home</a></li>
			<li><a href="#">About</a></li>
			<li><a href="#">Features</a></li>
			<li><a href="#">Examples</a></li>
		</ul>
	</header><!--/.main-header-->   

	<div class="banner">
		<img class="logo" src="img/flex.png">
		<h1 class="headline">BOY</h1>
		<span class="tagline">VOILA THIS IS IT!</span>
	</div><!--/.banner-->
	
	<div class="row">		
		<div class="primary col">
			<h2>Welcome!</h2>
			<p>Everything in this city is worth waiting in line for!</p>
		</div><!--/.primary-->
	</div>
	
	<footer class="main-footer">
		<div class="footer-inner">
			<span>&copy;2015 Residents of The Best City Ever.</span>
			<p>Macaroon oat cake sugar plum liquorice sweet pastry bear claw. Biscuit candy liquorice toffee cupcake donut candy cupcake. Chupa chups marzipan ice cream jelly beans macaroon cookie bear claw. Lemon drops sweet cake pie powder bear claw topping. Wafer caramels bear claw chupa chups candy canes pastry apple pie. Liquorice croissant danish sweet roll cake jelly. Chocolate bar chocolate bar caramels cotton candy marzipan bear claw pudding. Icing icing jelly-o lemon drops.</p>
		</div>
	</footer>

Answer 2

看看

/* ================================= 
  Media Queries
==================================== */

@media (min-width: 769px) {
    .main-header,
    .row,
  .footer-inner{
        width: 80%;
        margin: 0 auto;
        max-width: 1150px;
    }

只需将宽度从80％更改为100％。

Answer 3

放入主标题position:fixed;

Flexbox导航栏上的全宽不起作用

3 个答案: