我想在div元素的services标题旁边绘制一条垂直线,请告诉我如何在服务标题旁边移动垂直线?
代码的HTML部分
<div class="services">
<h2>Services</h2>
<div class="vl">
<h3>Vertical Line</h3>
</div>
</div>
CSS部分代码
.services {
margin-top: -35px;
padding-left: 10px;
padding-top: 30px;
padding-bottom:px;
font-size: 40px;
background-color: #fcff60;
}
.vl {
border-left: 5px solid rgb(128, 0, 17);
position: absolute;
margin-left: 4em;
top: 0%;
}
答案 0 :(得分:2)
.services {
margin-top: -35px;
padding-left: 10px;
padding-top: 30px;
padding-bottom:px;
font-size: 30px;
background-color: #fcff60;
}
.services h2 {
position: relative;
display: inline-block;
padding: 0 30px 0 0 ;
margin: 10px 0;
}
.services h2:after {
border-left: 5px solid rgb(128, 0, 17);
position: absolute;
height: 100%;
right: 10px;
bottom: 0;
content: "";
display:block;
}
p{
display: inline;
}
&#13;
<div class="services">
<h2>Services</h2>
<p>Text next to line</p>
</div>
&#13;
答案 1 :(得分:0)
这取决于您想要的线路。只需将border-left: 5px solid rgb(128, 0, 17);
添加到div .services
即可。
在<div></div>
中包裹您的所有内容,并为该border
添加<div></div>
。
这是您应该遵循的工作流程。
答案 2 :(得分:0)
您可以单独使用CSS实现此目的。 注意:您可以删除注释的css属性
.services {
margin-top: -35px;
/*padding-left: 10px;
padding-top: 30px;
padding-bottom:px;*/
padding:30px 0 0 10px;
font-size: 40px;
background-color: #fcff60;
}
.services h2{display:inline-block}
.vl {
border-left: 5px solid rgb(128, 0, 17);
/*position: absolute;
margin-left: 4em;
top: 0%;*/
display:inline-block;
}