H2標簽重疊文字
[英]H2 tag overlapping text
問題描述
我今天大部分時間都在休假，試圖弄清楚為什么此h2標簽與下面的文本重疊？
這是我正在使用的相同場景： 代碼筆
body { max-width: 600px; margin: auto; } .sections-entry-title h2 { border: 3px solid; border-radius: 50px; color: white; display: inline-block; padding: 20px 10px; background: #DD3333; } *, *:before, *:after { box-sizing: border-box; } .sections-entry-title { text-align: center; margin: auto; border-bottom: 3px solid #bb3333; height: 64px; } div { display: block; } .width-80 { width: 100%; margin: auto; max-width: 900px; padding: 80px 10px 60px 10px; }
<body> <div class="sections-entry-title"><h2>This is a very long title this is a very long title this is a very ling title again very very long even longer than you thought actually super long long title that it doesnt make sense</h2></div> <div class="width-80"> text text text texttettext text text text textext text text textext text text text textt textxt text text text text text.<p></p> <p><b>Choose an option to get started</b></p> </div> </body>
無論我做什么，我都無法讓h2標簽僅占據自己的空間，而不能覆蓋其下方的文本。
更新：之所以將下面的類設置為64px是因為我想在h2標簽后面創建一個水平。
.sections-entry-title {
height: 64px;
}
謝謝
6 個解決方案
解決方案1
2 2016-04-28 10:59:23
您的.sections-entry-title的靜態高度為64px ，將其刪除並顯示正常：
body { max-width: 600px; margin: auto; } .sections-entry-title h2 { border: 3px solid; border-radius: 50px; color: white; display: inline-block; padding: 20px 10px; background: #DD3333; } *, *:before, *:after { box-sizing: border-box; } .sections-entry-title { text-align: center; margin: auto; border-bottom: 3px solid #bb3333; } div { display: block; } .width-80 { width: 100%; margin: auto; max-width: 900px; padding: 80px 10px 60px 10px; }
<div class="sections-entry-title"><h2>This is a very long title this is a very long title this is a very ling title again very very long even longer than you thought actually super long long title that it doesnt make sense</h2></div> <div class="width-80"> text text text texttettext text text text textext text text textext text text text textt textxt text text text text text.<p></p> <p><b>Choose an option to get started</b></p> </div>
編輯：更新為還在.sections-entry-title的背景中包括該欄：
body { max-width: 600px; margin: auto; } .sections-entry-title h2 { border: 3px solid; border-radius: 50px; color: white; display: inline-block; padding: 20px 10px; background: #DD3333; } *, *:before, *:after { box-sizing: border-box; } .sections-entry-title { text-align: center; margin: auto; border-bottom: 3px solid #bb3333; position: relative; } .sections-entry-title:after { position: absolute; display: block; height: 10px; background-color: #000; content: " "; top: 64px; z-index: -1; left: -40px; right: -40px; } div { display: block; } .width-80 { width: 100%; margin: auto; max-width: 900px; padding: 80px 10px 60px 10px; }
<div class="sections-entry-title"><h2>This is a very long title this is a very long title this is a very ling title again very very long even longer than you thought actually super long long title that it doesnt make sense</h2></div> <div class="width-80"> text text text texttettext text text text textext text text textext text text text textt textxt text text text text text.<p></p> <p><b>Choose an option to get started</b></p> </div>
解決方案2
0 2016-04-28 10:59:42
您已將section-entry-title設置為64px的高度。 刪除它（或將其設置為auto ），它將正常工作。
.sections-entry-title {
height: 64px; <------ remove or set 'auto'
}
更新的行為
如注釋中所述，以下內容將添加經過h2標簽的垂直對齊的水平標尺。
為此，可以使用css :before和:after選擇器分別在h2的左側和右側放置一行。
.sections-entry-title h2:before {
content: '';
position: absolute;
left: 100%;
top: 50%;
transform: translateY(-50%);
height: 3px;
background: #bb3333;
width: 100%;
}
.sections-entry-title h2:after {
content: '';
position: absolute;
right: 100%;
top: 50%;
transform: translateY(-50%);
height: 3px;
background: #bb3333;
width: 100%;
}
然后，只需將h2設置為與position: relative相對position: relative 。
解決方案3
0 2016-04-28 11:00:00
它的父.sections-entry-title高度為64px，從而防止文檔流為h2元素提供所需的空間。
.sections-entry-title {
height: auto;
}
解決方案4
0 2016-04-28 11:00:35
增加或刪除.sections-entry-title div的高度樣式。
您具有一個height: 64px樣式。
默認情況下，所有元素也都有一個overflow: visible導致重疊的overflow: visible樣式。
解決方案5
0 2016-04-28 11:11:49
從類名.sections-entry-title中刪除Height，否則將height設置為auto。 因為您指定的高度小於您所擁有的高度。
解決方案6
0 2016-04-29 07:12:17
事實證明，我要做的就是向.sections-entry-title h2中添加一個-1的z-index值，並使用pseudo：before創建位於h2標簽后面的水平線。
這是代碼：
.sections-entry-title h2 {
border: 3px solid;
border-radius: 50px;
color: white;
display: inline-block;
padding: 20px 10px;
background-color: #DD3333;
}
.sections-entry-title h2:before {
content: '';
position: absolute;
left: 0;
margin-top: 20px;
transform: translateY(-50%);
height: 3px;
background: white;
width: 100%;
z-index: -1;
}
另外，感謝大家為我指出正確的方向。
@Chris我將其保留在我的代碼中，謝謝
transform: translateY(-50%);
更改文本 <h2> 在不更改跨度的情況下，使用相同的h2標簽
[英]change the text in the <h2> without change the span the same h2 tag
有沒有辦法將動態文本應用於 <h2> 在webform上標記？
[英]Is there any way to apply dynamic text to an <h2> tag on a webform?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.