我试图将 div 放在 hr 标签的正下方,但它似乎不起作用。我尝试添加 padding: 0;边距:0;相反,什么都没有改变。现在我有这个:
但我想要像下图这样的东西:
HTML:
<hr class="hr">
<div class="alttxt">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis knostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum. </p>
</div>
CSS:
.hr {
border: 3px solid #ffffff;
margin: 0 5% 0 5%;
padding-bottom: 0 !important;
}
.alttxt {
background-color: rgba(1,1,1,0.5);
margin-top: 0 !important;
margin: 0 5% 0 5%;
}
.alttxt p {
text-align: justify;
padding: 3% 3% 3% 3%;
color: white;
font-size: 140%;
}
答案 0 :(得分:3)
删除段落的默认边距
.hr {
border: 3px solid red;
margin: 0 5% 0 5%;
}
.alttxt {
background-color: rgba(1, 1, 1, 0.5);
margin: 0 5% 0 5%;
}
.alttxt p {
text-align: justify;
padding: 3% 3% 3% 3%;
color: white;
font-size: 140%;
margin: 0;
}
<hr class="hr">
<div class="alttxt">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis knostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum. </p>
</div>
答案 1 :(得分:-1)
播放 .alttxt 边距 我选择了 7% 这是我对您的 css 所做的唯一更改
.hr
{
border: 3px solid #0000ff;
margin: 0 5% 0 5%;
padding-bottom: 0 !important;
}
.alttxt
{
background-color: rgba(1,1,1,0.5);
margin-top: 0 !important;
margin: 0 7% 0 7%;
p
{
text-align: justify;
padding: 3% 3% 3% 3%;
color: white;
font-size: 140%;
}
}