元素宽度未正确对齐

我真的在这里挣扎，试图弄清楚发生了什么。我有一个带有标题、侧边栏和中央内容页面的 HTML。

侧边栏和中心内容位于同一个div 中，这也充当它们的 clearfix。我将侧边栏浮动在左侧，将内容浮动在右侧，但内容div 没有整齐地相互对齐，而是掉了下来。

.HTML

<body>
<header>
<img src="./img/Logo_Color.png" alt="Logo">
<h1>Batch Documentation</h1>
</header>
<div class="clearfix">
<div class="sidebar">
<nav>
<ul>
<li><a href="#">Overview</a></li>
<li><a href="#">Fl Overview</a></li>
<li><a href="#">PF2 Overview</a></li>
<li><a href="#">Inputs</a></li>
<li><a href="#">Outputs</a></li>
<li><a href="#">Appendix A</a></li>
<li><a href="#">Appendix B</a></li>
</ul>
</nav>
</div>
<main>    
<div class="centerContent">
<h2>Overview</h2>
<p>
Integer in qui primam te ipsa-plenus Crescere Effectum Septembrem.  Me quo 700% octavas ad imperium caduca si eros eius orci arcu te mirum consumere, meritos modo diam eros ti, in cras diuturna interpres, semente, securitas sem odio dignitatis reuiescat.
Lius quam charybdium nonullis sem inibunt illum, civibus eius arendom, Indolem te e licentiose te maiestatem molestias typi combinatur sagittis successus nomine, reniam eos te-feroces assueverunt.
Saepe non, Fervore 2000 galliae nibh eu ea ut:
</p>
<code>Hello</code>
</div>
</main>
</div>
</body>

.CSS

* {
font-family: 'Roboto', sans-serif;
box-sizing: border-box;
margin: 0;
padding: 0;
list-style-type: none;
}
body {
margin: auto;
width: 1265px;
background-color: #eae0ff;
}
main {
display: inline-block
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
header {
margin: 15px 10px 20px 10px;
}
.sidebar {
width: 25%;
margin: 5px 0px 10px 10px;
padding-right: 20px;
float: left;
background-color: #ccccff;
}
.centerContent {
width: 75%;
margin: auto;
padding-left: 20px;
border: 3px solid #73ad21;
float: right;
}
li {
margin-top: 5px;
margin-bottom: 5px;
}
code {
width: 90%;
font-family: 'Source Code Pro', monospace;
color: #43892a;
background-color: #000;
display: block;
}

我特别担心，因为框大小设置为边框框，并且显示是内联块。侧边栏的宽度为 25%，而主要内容的宽度为 75%，但似乎边距和填充被添加到其尺寸中，而不是包含在 % 计算中。

我不知道你为什么现在使用浮点数，我附加了一个相同的小弹性框布局。希望有帮助。

* {
font-family: 'Roboto', sans-serif;
box-sizing: border-box;
margin: 0;
padding: 0;
list-style-type: none;
}
body {
margin: auto;
background-color: #eae0ff;
}
main {
display: inline-block
}
.clearfix{
display:flex;
}
header {
margin: 15px 10px 20px 10px;
}
.sidebar {
width: 25%;
margin: 0px 0px 10px 10px;
padding-right: 20px;
background-color: #ccccff;
flex: 0 0 auto;
}
.centerContent {
width: 75%;
margin: auto;
padding-left: 20px;
border: 3px solid #73ad21;
}
li {
margin-top: 5px;
margin-bottom: 5px;
}
code {
width: 90%;
font-family: 'Source Code Pro', monospace;
color: #43892a;
background-color: #000;
display: block;
}

<body>
<header>
<img src="./img/Logo_Color.png" alt="Logo">
<h1>Batch Documentation</h1>
</header>
<div class="clearfix">
<div class="sidebar">
<nav>
<ul>
<li><a href="#">Overview</a></li>
<li><a href="#">Fl Overview</a></li>
<li><a href="#">PF2 Overview</a></li>
<li><a href="#">Inputs</a></li>
<li><a href="#">Outputs</a></li>
<li><a href="#">Appendix A</a></li>
<li><a href="#">Appendix B</a></li>
</ul>
</nav>
</div>
<main>
<div class="centerContent">
<h2>Overview</h2>
<p>
Integer in qui primam te ipsa-plenus Crescere Effectum Septembrem. Me quo 700% octavas ad imperium caduca si eros eius orci arcu te mirum consumere, meritos modo diam eros ti, in cras diuturna interpres, semente, securitas sem odio dignitatis reuiescat.
Lius quam charybdium nonullis sem inibunt illum, civibus eius arendom, Indolem te e licentiose te maiestatem molestias typi combinatur sagittis successus nomine, reniam eos te-feroces assueverunt. Saepe non, Fervore 2000 galliae nibh eu ea ut:
</p>
<code>Hello</code>
</div>
</main>
</div>
</body>

最好使用弹性布局，它将是响应式的，并且永远不会产生问题。

.CSS：

* {
font-family: 'Roboto', sans-serif;
box-sizing: border-box;
margin: 0;
padding: 0;
list-style-type: none;
}
body {
margin: auto;
width: 96vw;
background-color: #eae0ff;
}
main {
width: 70%;
margin: auto;
}
.clearfix {
display: flex;
justify-content: space-between;
flex-direction: row;
margin: 0 20px;
}
header {
margin: 15px 10px 20px 10px;
}
.sidebar {
width: 25%;
background-color: #ccccff;
}
.centerContent {
border: 3px solid #73ad21;
}
li {
margin-top: 5px;
margin-bottom: 5px;
}
code {
font-family: 'Source Code Pro', monospace;
color: #43892a;
background-color: #000;
display: block;
}

我想你刚刚开始学习HTML，CSS。因此，每当您提供边距和填充(尤其是左边和右边(时，都会计算每个像素，否则您将面临像现在这样面临的问题。
将来您将学习 css 中的网格和弹性框。当你同时使用网格和弹性框(时，我敢打赌你永远不会使用float property。

由于您是初学者，因此您可以轻松理解我的解决方案 - 因此在您的 css 中您必须删除-

main{
display:inline-block;
}

并添加这个 -

.centerContent {
display: inline-block;
width: 70%; // play by changing the width.
margin: auto;
padding-left: 20px;
border: 3px solid #73ad21;
float: right; // float : left; will also work
}

边距不包括在框大小调整的宽度中：包括边框框但填充和边框。 https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

因此，边距仍然在侧边栏之外，第二个内容正在向下移动。您可以删除边距以将内容移回。

相关内容

最新更新

热门标签：