我如何設置位置 <h1> 和 <p> 在jumbotron？
[英]How do I set a position of <h1> and <p> in jumbotron?
問題描述
嗨，我想知道如何在jumbotron中設置h1和p的位置。 讓我們說我想把我的h1放在jumbotron的左下角和h1下我希望有p但是有一點左填。
.jumbotron { max-width: 100%; padding-top: 80px; padding-bottom: 80px; color: inherit; background-color: orange; } .jumbotron h1 { position: relative; display: block; font-weight: bold; font-size: 30px; color: white; padding-left: 40px; padding-bottom: 80px; } .jumbotron p { position: absolute; display: block; color: white; font-size: 20px; }
<div class="jumbotron"> <h1> Reserve your place </h1> <p>..before somebody will overtake you</p> </div>
3 個解決方案
解決方案1
0 2017-02-01 12:27:33
你設置了一些不必要的定位。 絕對沒有理由給h1 relative定位， absolute給p 。
老實說，根據你使用它的方式來判斷，我會說你應該做一些學習和實驗來充分理解這些機制。
.jumbotron { max-width: 100%; padding-top: 80px; padding-bottom: 80px; color: inherit; background-color: orange; } .jumbotron h1 { display: block; font-weight: bold; font-size: 30px; color: white; padding-left: 40px; } .jumbotron p { display: block; color: white; font-size: 20px; padding-left: 40px; }
<div class="jumbotron"> <h1> Reserve your place </h1> <p>..before somebody will overtake you</p> </div>
解決方案2
0 已采納 2017-02-01 12:33:21
希望這對你有所幫助！
.jumbotron { max-width: 100%; padding-top: 40px; padding-bottom: 80px; color: inherit; background-color: orange; } .jumbotron h1 { position: relative; display: block; font-weight: bold; font-size: 30px; color: white; padding-left: 40px; } .jumbotron p { position: absolute; display: block; color: white; font-size: 20px; padding-left:40px; }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> <link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="jumbotron"> <h1> Reserve your place </h1> <p>..before somebody will overtake you</p> </div> <script src="https://code.jquery.com/jquery.min.js"></script> <script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script> </body> </html>
解決方案3
0 2018-08-01 12:51:04
我已經做了類似這樣的工作，我的文字正在與中心，左或右對齊。
<div class="jumbotron text-center container">
<h1>This is demo</h1>
</div>
希望它會有所幫助。
在偽元素之前使用時，如何“移動” h1標簽的位置？
[英]How do I “shift” the position of h1 tag when using before pseudo element?
如何替換/更改里面的標題文本<h1></h1> ，使用Javascript？
[英]How Do I Replace/Change The Heading Text Inside <h1></h1>, Using Javascript?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.