我的班级<h1>标头伸出 <body>页 [英] My class <h1> header is sticking out of <body> page
问题描述
在 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>