文字和下划線的CSS定位

Question

我正在嘗試實現以下效果，但是在定位文本並使下划線到達屏幕末端時遇到一些麻煩。

 .header { height: 550px; width: 100%; background-color: #1F2041; position: relative; } .header h1, .header h2{ color: white; font-size: 52px; text-transform: uppercase; margin-bottom: 20px; border-bottom: 1.5px solid currentColor; line-height: 0.7; position: absolute; top: 210px; } .header p { margin-top: 40px; color: white; } 

 <div class="header"> <h2>About</h2> <h2>Nikola</h2> <p>Simple. Modern. Yours.</p> </div> 

這就是我要實現的目標

Answer 1

使用float和clear嘗試類似這樣的操作。 根據需要調整400px的大小。 也許這種方式（浮動）不是最好的方式，可能首選使用邊距，但是要避免使用position: absolute或元素可以快速重疊。

 .header { height: 550px; width: 100%; background-color: #1F2041; text-align: right; } .header * { float: right; clear: right; width: 400px; text-align: left; color: white; margin: 0 0 20px; } .header h1, .header h2{ color: white; font-size: 52px; text-transform: uppercase; border-bottom: 1.5px solid currentColor; } 

 <div class="header"> <h2>About</h2> <h2>Nikola</h2> <p>Simple. Modern. Yours.</p> </div> 

Answer 2

也許您需要類似的東西？ 使用絕對div，您可以更改其在父相對div中的位置。

您設置了一個靜態高度，因此頂部和底部的邊距大約為150像素，可以得到所需的高度

請記住，使用position:absolute; 它相對於具有position:relative的父div

 .header { height: 550px; width: 100%; background-color: #1F2041; position: relative; } .content-div{ position:absolute; margin: 150px 0 150px auto; width: 250px; right: 0; } .header h1, .header h2{ color: white; font-size: 52px; text-transform: uppercase; margin-bottom: 20px; border-bottom: 1.5px solid currentColor; line-height: 0.7; } .header p { margin-top: 40px; color: white; } 

 <div class="header"> <div class="content-div"> <h2>About</h2> <h2>Nikola</h2> <p>Simple. Modern. Yours.</p> </div> </div>