如何更改<hr>元素的位置？

我刚开始从事web开发，我的第一个项目是一个简历网站。我正试图把教育和经历部分与人力资源元素分开。它正在工作，然后我使用CSS中的浮动属性将教育描述对齐到左侧，并将相应的日期对齐到右侧。现在，在教育部分后面的线是在错误的区域。下面是一些代码:

<section>
<h2>EDUCATION</h2>
<p id='e1'><strong>M.A. in Teaching</strong>, University of North Carolina</p>
<p id='e2'><strong>June 2021 - May 2022</strong></p>
<p id='e1'><strong>B.A., Human Development & Family Studies major & Education minor</strong>, University of North Carolina</p>
</section>
<hr>
<section>
<h2>EXPERIENCE</h2>

id e1只向左浮动，id e2向右浮动。我怎样才能让hr元素出现在两个部分之间，而不是在教育部分的中间?

.edu{
display: flex;
flex-direction: row;
align-self: flex-start;
}

<body>
<section>
<h2>EDUCATION</h2>
<div class="edu">
<p id='e1'><strong>M.A. in Teaching</strong>, University of North Carolina</p>
<p id='e2'><strong>June 2021 - May 2022</strong></p>
<p id='e3'><strong>B.A., Human Development & Family Studies major & Education minor</strong>, University of North Carolina</p>
</div>
</section>
<hr>
<section>
<h2>EXPERIENCE</h2>
</body>

id应该是唯一的，所以将#e1从第三个p元素更改为您选择的但不同的
使用clear:left，使hr左侧的浮动属性被清除
你也可以使用clefix hack<hr>，通过添加clearfix类<hr>和添加这个CSS

.clearfix::after {
content: "";
clear: both;
display: table;
}

您还可以使用border-right添加垂直规则，如我在代码

* {
box-sizing: border-box/*So that padding used below don't effect width*/
}
hr {
clear: left
}
#e1 {
float: left;
width: 33%; /*Width so that content is divided in 3colums*/

height: 100px;
/*Height specified so that border become equal for all others and act as a vertical rule*/

border-right: 2px solid red;
padding: 5px;
}
#e2 {
float: right;
width: 33%;
height: 100px;
padding: 5px;
}
#e3 {
float: left;
width: 33%;
height: 100px;
border-right: 2px solid red;
padding: 5px;
}

<section>
<h2>EDUCATION</h2>
<p id='e1'><strong>M.A. in Teaching</strong>, University of North Carolina</p>
<p id='e2'><strong>June 2021 - May 2022</strong></p>
<p id='e3'><strong>B.A., Human Development & Family Studies major & Education minor</strong>, University of North Carolina</p>
</section>
<hr>
<section class="hed2">
<h2>EXPERIENCE</h2>

相关内容

最新更新

热门标签：