标题没有在 CSS 中跨越屏幕答案

【问题标题】：Header not stretching across screen in CSS标题没有在 CSS 中跨越屏幕
【发布时间】：2016-06-27 04:00:11
【问题描述】：

我正在疯狂地尝试在屏幕上伸展我的标题。我将宽度设置为 100%，但左边有一个巨大的差距。

它似乎与屏幕中间的文本相关联，当我确实点击了可以完美拉伸标题的内容时（例如将我的“bg”类从<html> 移动到<body>），突然下面的文字被撞到左边。

我只需要在屏幕上 100% 显示标题，并将其下方的文本居中。救命！

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0b1 | 201101 
   NOTE: WORK IN PROGRESS
   USE WITH CAUTION AND TEST WITH ABANDON */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* MY CODE BEGINS BELOW */

.header {
	display: flex;
	width: 100%;
	height: 150px;
	background-color: black;
	opacity: 0.8;
	position: absolute;
}

.bg {
  display: flex;
  display: -webkit-flex;
  background: black url(https://images.unsplash.com/photo-1465205568425-23fdd3805e49?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=7e476dbc9096ec1c869bd2cb97d82c70) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  margin: auto;
  padding: auto;
  width: 100%;
  justify-content: center;
}

.headline {
  display: flex;
  width: 100%;
  justify-content: center;
  margin: auto;
  -ms-box-orient: horizontal;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
}

.headline p {
  margin-top: 200px;
  background-color: transparent;
  color: white;
  font-family: 'Heebo', sans-serif;
  font-size: 50px;
  width: 100%;
}

<!DOCTYPE html>

<html class="bg" lang="en">
<head>
  <meta charset="utf-8">

  <title>Hi</title>
  <meta name="description" content="Testing">
  <meta name="author" content="Nate">

  <link rel="stylesheet" href="style.css">
  <link href="https://fonts.googleapis.com/css?family=Heebo" rel="stylesheet">

  <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
</head>

<body>

<div class="header">
	
</div>

<div class="headline">
	<p>Centered Text</p>
</div>

 <script src="js/scripts.js"></script>
</body>
</html>

【问题讨论】：

标签： html css flexbox navbar

【解决方案1】：

由于您的标题是绝对定位的，您需要为left position 添加规则并将其设置为0。请参阅下面的更新代码；

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0b1 | 201101 
   NOTE: WORK IN PROGRESS
   USE WITH CAUTION AND TEST WITH ABANDON */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}





/* MY CODE BEGINS BELOW */




.header {
	display: flex;
	width: 100%;
	height: 150px;
	background-color: black;
	opacity: 0.8;
	position: absolute;
    left : 0;
}

.bg {
  display: flex;
  display: -webkit-flex;
  background: black url(https://images.unsplash.com/photo-1465205568425-23fdd3805e49?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=7e476dbc9096ec1c869bd2cb97d82c70) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  margin: auto;
  padding: auto;
  width: 100%;
  justify-content: center;
}

.headline {
  display: flex;
  width: 100%;
  justify-content: center;
  margin: auto;
  -ms-box-orient: horizontal;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
}

.headline p {
  margin-top: 200px;
  background-color: transparent;
  color: white;
  font-family: 'Heebo', sans-serif;
  font-size: 50px;
  width: 100%;
}

<!DOCTYPE html>

<html class="bg" lang="en">
<head>
  <meta charset="utf-8">

  <title>Hi</title>
  <meta name="description" content="Testing">
  <meta name="author" content="Nate">

  <link rel="stylesheet" href="style.css">
  <link href="https://fonts.googleapis.com/css?family=Heebo" rel="stylesheet">

  <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
</head>

<body>



<div class="header">
	
</div>


<div class="headline">
	<p>Centered Text</p>
</div>

 <script src="js/scripts.js"></script>
</body>
</html>

【讨论】：

【解决方案2】：

尝试将left:0; 添加到您的.header。

【讨论】：