我的班级<h1>标头伸出 <body>页 [英] My class <h1> header is sticking out of <body> page

查看：49
本文介绍了我的班级<h1>标头伸出 <body>页的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

在 F12 中，当我拖动响应式页面时，当我将其调整为移动设备大小时，我注意到标题伸出 body page.你知道为什么会导致文本像这样突出的问题吗?

最后，我注意到在我将 letter-spacing 元素放入我的标题后调整我的手机大小时，我的标题标题没有保持居中.

不知道这里的标题发生了什么.

这是我的 html 和 css

*{box-sizing: 边框框；}身体 {宽度:100%；高度:100%；边距:0；字体系列:Arial、Helvetica、sans-serif；}/* 标题部分 */.header {填充:80px；文本对齐:居中；背景:#ccccff；}.header h1 {字体大小:68px；字体系列:Lucida Console"，摩纳哥，等宽；字母间距:10px；}/* 主要内容部分 */.内容 {填充:10px；背景:#e6e6e6；}.content h2 {文本对齐:居中；}.内容p{边距:30px；}/* 三个相等的列 *//* 创建三个彼此相邻浮动的相等列 */.柱子 {向左飘浮;宽度:33.33%；填充:10px；}/* 清除列后的浮动 */.行:后{内容: "";显示:表；清楚:两者；}/* 这是页脚部分 */页脚{宽度:100%；高度:100%；填充:50px；文本对齐:居中；背景:浅绿色；}/* 响应式设计从这里开始 */@media only screen and (max-width: 768px) {.柱子 {宽度:100%；}}

<头><title>标题页</title><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" type="text/css" href="style.css"><身体><!-- 这是一个标题--><div class="header"><h1>网站标题</h1><p>Dolor sed veniam minim eiusmod sint laboure elit lilamco dolor in dolor clipa occaecat do.</p>

<!-- 这是主要内容--><div class="内容"><!-- 关于部分--><h2>关于</h2><p>Lorem ipsum clipa nlila tempor amet dolor clipa magna commodo minim.Sed ut lilamco veniam est esse tempor in anim 例外 lilamco 例外 deserunt 广告.Lorem ipsum tempor eiusmod nisi consectetur magna cupidatat in ad velit clipa aliqua id sunt clipa nlila aliqualaboris.</p><!-- 3 列响应式布局--><div class="row"><div class="column" style="background-color:#aaa;"><h2>第1列</h2><p>Magna velit dolor esse magna ut sed cillum magna lilamco nisi ut.Qui Labore in sed ea excepteur clipa Laboris pariatur irure fugiat fugiat dolor qui.Velit aliquip fugiat eu ea dolor velit proident veniam consectetur ut dolor clipa sunt incididunt veniam duis nisi tempor.</p><ul><li>技能1</li><li>技能2</li><li>技能3</li><li>技能4</li><li>技能5</li>

<div class="column" style="background-color:#bbb;"><h2>第2列</h2><p>Magna velit dolor esse magna ut sed cillum magna lilamco nisi ut.Qui Labore in sed ea excepteur clipa Laboris pariatur irure fugiat fugiat dolor qui.Velit aliquip fugiat eu ea dolor velit proident veniam consectetur ut dolor clipa sunt incididunt veniam duis nisi tempor.</p><ul><li>技能1</li><li>技能2</li><li>技能3</li><li>技能4</li><li>技能5</li>

<div class="column" style="background-color:#ccc;"><h2>第3列</h2><p>Magna velit dolor esse magna ut sed cillum magna lilamco nisi ut.Qui Labore in sed ea excepteur clipa Laboris pariatur irure fugiat fugiat dolor qui.Velit aliquip fugiat eu ea dolor velit proident veniam consectetur ut dolor clipa sunt incididunt veniam duis nisi tempor.</p><ul><li>技能1</li><li>技能2</li><li>技能3</li><li>技能4</li><li>技能5</li>

<!-- 这是页脚--><div class="footer"><页脚>人名及副本；2019年</页脚>

</html>

解决方案

我认为这个问题的最佳解决方案是打破常规.同时使用 word-break: break-word;

缩小屏幕尺寸

* {box-sizing: 边框框；}身体 {宽度:100%；高度:100%；边距:0；字体系列:Arial、Helvetica、sans-serif；}/* 标题部分 */.header {填充:80px；文本对齐:居中；背景:#ccccff；}.header h1 {字体大小:68px；字体系列:Lucida Console"，摩纳哥，等宽；字母间距:10px；断字:断字；}/* 主要内容部分 */.内容 {填充:10px；背景:#e6e6e6；}.content h2 {文本对齐:居中；}.内容p{边距:30px；}/* 三个相等的列 *//* 创建三个彼此相邻浮动的相等列 */.柱子 {向左飘浮;宽度:33.33%；填充:10px；}/* 清除列后的浮动 */.行:后{内容: "";显示:表；清楚:两者；}/* 这是页脚部分 */页脚{宽度:100%；高度:100%；填充:50px；文本对齐:居中；背景:浅绿色；}/* 响应式设计从这里开始 */@media only screen and (max-width: 768px) {.柱子 {宽度:100%；}}

<!-- 这是一个标题--><div class="header"><h1>网站标题</h1><p>Dolor sed veniam minim eiusmod sint laboure elit lilamco dolor in dolor clipa occaecat do.</p>

<!-- 这是主要内容--><div class="内容"><!-- 关于部分--><h2>关于</h2><p>Lorem ipsum clipa nlila tempor amet dolor clipa magna commodo minim.Sed ut lilamco veniam est esse tempor in动画例外 lilamco 例外 deserunt 广告.Lorem ipsum tempor eiusmod nisi consectetur magna cupidatat in advelit clipa aliqua id sunt clipa nlila aliqua Laboris.</p><!-- 3 列响应式布局--><div class="row"><div class="column" style="background-color:#aaa;"><h2>第1列</h2><p>Magna velit dolor esse magna ut sed cillum magna lilamco nisi ut.Qui Labore in sed ea excepteur clipaLaboris pariatur irure fugiat fugiat dolor qui.Velit aliquip fugiat eu ea dolor velit proident veniamconsectetur ut dolor clipa sunt incididunt veniam duis nisi tempor.</p><ul><li>技能1</li><li>技能2</li><li>技能3</li><li>技能4</li><li>技能5</li>

<div class="column" style="background-color:#bbb;"><h2>第2列</h2><p>Magna velit dolor esse magna ut sed cillum magna lilamco nisi ut.Qui Labore in sed ea excepteur clipaLaboris pariatur irure fugiat fugiat dolor qui.Velit aliquip fugiat eu ea dolor velit proident veniamconsectetur ut dolor clipa sunt incididunt veniam duis nisi tempor.</p><ul><li>技能1</li><li>技能2</li><li>技能3</li><li>技能4</li><li>技能5</li>

<div class="column" style="background-color:#ccc;"><h2>第3列</h2><p>Magna velit dolor esse magna ut sed cillum magna lilamco nisi ut.Qui Labore in sed ea excepteur clipaLaboris pariatur irure fugiat fugiat dolor qui.Velit aliquip fugiat eu ea dolor velit proident veniamconsectetur ut dolor clipa sunt incididunt veniam duis nisi tempor.</p><ul><li>技能1</li><li>技能2</li><li>技能3</li><li>技能4</li><li>技能5</li>

<!-- 这是页脚--><div class="footer"><页脚>人名及副本；2019年</页脚>

In F12 when I drag the responsive page, I noticed that the header is sticking out of the body page when I resized it down to mobile size. Do you know why it would be causing the issue for the text to stick out like that?

Lastly, I noticed my header title is not staying centered when resizing my mobile after I put in a letter-spacing element into my header.

Don't know what is going on with my header here.

Here are my html and css

*{
	box-sizing: border-box;
}

body {
	width: 100%;
	height: 100%;
	margin: 0;
	font-family: Arial, Helvetica, sans-serif;
}

/* The header section */

.header {
	padding: 80px;
	text-align: center;
	background: #ccccff;
}

.header h1 {
	font-size: 68px;
	font-family: "Lucida Console", Monaco, monospace;
	letter-spacing: 10px;
}

/* The main content section */

.content {
	padding: 10px;
	background: #e6e6e6;
}

.content h2 {
	text-align: center;
}

.content p {
	margin: 30px;
}

/* Three equal columns */

/* Create three equal columns that floats next to each other */
.column {
  float: left;
  width: 33.33%;
  padding: 10px;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* This is the footer section */
footer {
	width: 100%;
	height: 100%;
	padding: 50px;
	text-align: center;
	background: lightgreen;
}

/* Responsive design starts here */

@media only screen and (max-width: 768px) {
	.column {
		width: 100%;
	}
}

<!DOCTYPE html>
<html>
<head>
	<title>Title Page</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

	<!-- This is a header -->
	<div class="header">
		
		<h1>Website Title</h1>
		<p>Dolor sed veniam minim eiusmod sint labore elit lilamco dolor in in dolor clipa occaecat do.</p>

	</div>

	<!-- This is the main content -->
	<div class="content">

		<!-- About section -->

		<h2>About</h2>
		<p>
			Lorem ipsum clipa nlila tempor amet dolor clipa magna commodo minim. Sed ut lilamco veniam est esse tempor in anim excepteur lilamco excepteur deserunt ad. Lorem ipsum tempor eiusmod nisi consectetur magna cupidatat in ad velit clipa aliqua id sunt clipa nlila aliqua laboris.
		</p>

		<!-- 3 column responsive layout -->

		<div class="row">

		  <div class="column" style="background-color:#aaa;">
		    <h2>Column 1</h2>
		    <p>
		    	Magna velit dolor esse magna ut sed cillum magna lilamco nisi ut. Qui labore in sed ea excepteur clipa laboris pariatur irure fugiat fugiat dolor qui. Velit aliquip fugiat eu ea dolor velit proident veniam consectetur ut dolor clipa sunt incididunt veniam duis nisi tempor.
		    </p>
		    <ul>
		    	<li>Skill 1</li>
			    <li>Skill 2</li>
			    <li>Skill 3</li>
			    <li>Skill 4</li>
			    <li>Skill 5</li>
		    </ul>
		    
		  </div>


		  <div class="column" style="background-color:#bbb;">
		    <h2>Column 2</h2>
		    <p>
		    	Magna velit dolor esse magna ut sed cillum magna lilamco nisi ut. Qui labore in sed ea excepteur clipa laboris pariatur irure fugiat fugiat dolor qui. Velit aliquip fugiat eu ea dolor velit proident veniam consectetur ut dolor clipa sunt incididunt veniam duis nisi tempor.
		    </p>
		    <ul>
		    	<li>Skill 1</li>
			    <li>Skill 2</li>
			    <li>Skill 3</li>
			    <li>Skill 4</li>
			    <li>Skill 5</li>
		    </ul>
		    
		  </div>


		  <div class="column" style="background-color:#ccc;">
		    <h2>Column 3</h2>
		    <p>
		    	Magna velit dolor esse magna ut sed cillum magna lilamco nisi ut. Qui labore in sed ea excepteur clipa laboris pariatur irure fugiat fugiat dolor qui. Velit aliquip fugiat eu ea dolor velit proident veniam consectetur ut dolor clipa sunt incididunt veniam duis nisi tempor.
		    </p>
		    <ul>
		    	<li>Skill 1</li>
			    <li>Skill 2</li>
			    <li>Skill 3</li>
			    <li>Skill 4</li>
			    <li>Skill 5</li>
		    </ul>
		    
		  </div>

		</div>



	</div>

	<!-- This is the footer -->
	<div class="footer">
		<footer>
			Person Name &copy; 2019
		</footer>
	</div>

</body>
</html>

解决方案

I think the best solution for this issue will be to break the word. While reducing screen size with word-break: break-word;

* {
  box-sizing: border-box;
}

body {
  width: 100%;
  height: 100%;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

/* The header section */

.header {
  padding: 80px;
  text-align: center;
  background: #ccccff;
}

.header h1 {
  font-size: 68px;
  font-family: "Lucida Console", Monaco, monospace;
  letter-spacing: 10px;
  word-break: break-word;
}

/* The main content section */

.content {
  padding: 10px;
  background: #e6e6e6;
}

.content h2 {
  text-align: center;
}

.content p {
  margin: 30px;
}

/* Three equal columns */

/* Create three equal columns that floats next to each other */
.column {
  float: left;
  width: 33.33%;
  padding: 10px;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* This is the footer section */
footer {
  width: 100%;
  height: 100%;
  padding: 50px;
  text-align: center;
  background: lightgreen;
}

/* Responsive design starts here */

@media only screen and (max-width: 768px) {
  .column {
    width: 100%;
  }
}

<body>
  <!-- This is a header -->
  <div class="header">
    <h1>Website Title</h1>
    <p>Dolor sed veniam minim eiusmod sint labore elit lilamco dolor in in dolor clipa occaecat do.</p>
  </div>

  <!-- This is the main content -->
  <div class="content">
    <!-- About section -->

    <h2>About</h2>
    <p>
      Lorem ipsum clipa nlila tempor amet dolor clipa magna commodo minim. Sed ut lilamco veniam est esse tempor in
      anim excepteur lilamco excepteur deserunt ad. Lorem ipsum tempor eiusmod nisi consectetur magna cupidatat in ad
      velit clipa aliqua id sunt clipa nlila aliqua laboris.
    </p>

    <!-- 3 column responsive layout -->

    <div class="row">
      <div class="column" style="background-color:#aaa;">
        <h2>Column 1</h2>
        <p>
          Magna velit dolor esse magna ut sed cillum magna lilamco nisi ut. Qui labore in sed ea excepteur clipa
          laboris pariatur irure fugiat fugiat dolor qui. Velit aliquip fugiat eu ea dolor velit proident veniam
          consectetur ut dolor clipa sunt incididunt veniam duis nisi tempor.
        </p>
        <ul>
          <li>Skill 1</li>
          <li>Skill 2</li>
          <li>Skill 3</li>
          <li>Skill 4</li>
          <li>Skill 5</li>
        </ul>
      </div>

      <div class="column" style="background-color:#bbb;">
        <h2>Column 2</h2>
        <p>
          Magna velit dolor esse magna ut sed cillum magna lilamco nisi ut. Qui labore in sed ea excepteur clipa
          laboris pariatur irure fugiat fugiat dolor qui. Velit aliquip fugiat eu ea dolor velit proident veniam
          consectetur ut dolor clipa sunt incididunt veniam duis nisi tempor.
        </p>
        <ul>
          <li>Skill 1</li>
          <li>Skill 2</li>
          <li>Skill 3</li>
          <li>Skill 4</li>
          <li>Skill 5</li>
        </ul>
      </div>

      <div class="column" style="background-color:#ccc;">
        <h2>Column 3</h2>
        <p>
          Magna velit dolor esse magna ut sed cillum magna lilamco nisi ut. Qui labore in sed ea excepteur clipa
          laboris pariatur irure fugiat fugiat dolor qui. Velit aliquip fugiat eu ea dolor velit proident veniam
          consectetur ut dolor clipa sunt incididunt veniam duis nisi tempor.
        </p>
        <ul>
          <li>Skill 1</li>
          <li>Skill 2</li>
          <li>Skill 3</li>
          <li>Skill 4</li>
          <li>Skill 5</li>
        </ul>
      </div>
    </div>
  </div>

  <!-- This is the footer -->
  <div class="footer">
    <footer>
      Person Name &copy; 2019
    </footer>
  </div>
</body>

这篇关于我的班级&lt;h1&gt;标头伸出 &lt;body&gt;页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆