所以我正在為我的副專案嘗試有角度的材料分隔線，但我在對齊文本時遇到了一些問題
從圖片中可以看出，右側的文本而不是放置在垂直線旁邊，而是放置在垂直線和左側文本下方。
HTML代碼：
<section class="about" id="about">
<div class="content">
<div class="titleContent">
<h2> Title Here </h2>
</div>
<mat-divider [vertical]="true"></mat-divider>
<div class="textContent">
<p> Lorep Ipsum Lorep Ipsum Lorep Ipsum Lorep Ipsum Lorep Ipsum Lorep Ipsum Lorep Ipsum Lorep Ipsum Lorep Ipsum Lorep Ipsum
Lorep Ipsum Lorep Ipsum Lorep Ipsum Lorep Ipsum Lorep Ipsum Lorep Ipsum Lorep Ipsum Lorep Ipsum Lorep Ipsum Lorep Ipsum
Lorep Ipsum Lorep Ipsum Lorep Ipsum Lorep Ipsum Lorep Ipsum Lorep Ipsum Lorep Ipsum Lorep Ipsum Lorep Ipsum Lorep Ipsum
</p>
</div>
</div>
CSS：
section{
padding: 30px 50px;
}
.about{
position: relative;
width: 100%;
min-height: 100vh;
display: flex;
align-items: center;
}
.about .content{
min-width: 800px;
}
.about .content mat-divider{
border: 2px;
border-style: solid;
height: 100px;
width: 0px;
position: inherit !important;
vertical-align: middle;
display: inline-flex;
}
.about .content .titleContent > h2{
max-width: 200px;
}
.about .content .titleContent{
display: inline-flex;
margin-right: 20px;
}
.about .content .textContent{
overflow: auto;
}
我嘗試在使用 google chrome 進行修改時進行對齊，但它沒有用，因為我對前端的作業原理知之甚少。
任何幫助表示贊賞！
uj5u.com熱心網友回復：
只給 .content 類顯示 flex
.content{
display:flex;
}
uj5u.com熱心網友回復：
在您的 CSS 檔案中添加以下代碼
.titleContent {
border-bottom:5px solid;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/322077.html
上一篇：復制UI模板