如何使HR元素與它上面的文本的寬度相同

我希望此特定HR的寬度與其上的任何屏幕大小上的「較大的頭像」相同。我對的245px小時的默認寬度，但對於這個特殊的一個，我想是因爲上面的文字的寬度爲任何屏幕尺寸如何使HR元素與它上面的文本的寬度相同

hr { 
 
    border-top: 0px solid blue !important; 
 
    padding: 0; 
 
    margin-top: 0.5em !important; 
 
    border-width: 6px !important; 
 
    width: 245px; 
 
}

<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 
    <div class="container"> 
 
     <div class="row text-center"> 
 
      <h1>HEADER 1</h1> 
 
     </div> 
 
     <div class="row text-center"> 
 
      <h1>LARGER HEADER LIKE THIS</h1> 
 
      <hr> 
 
     </div>

來源

2017-05-25 John R

添加樣式只有標籤。

– tech2017

更好的方法是使用hr樣式作爲要應用它的文本的僞元素。這是一個例子。

.hr { 
 
    display: inline-block; 
 
} 
 
.hr:after { 
 
    content: ''; 
 
    display: block; 
 
    border-top: 6px solid blue; 
 
    margin-top: 0.5em; 
 
}

<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 
    <div class="row text-center"> 
 
    <h1>HEADER 1</h1> 
 
    </div> 
 
    <div class="row text-center"> 
 
    <h1 class="hr">LARGER HEADER LIKE THIS</h1> 
 
    </div> 
 
</div>

但你也可以窩在h1的hr，並限制h1的寬度尺寸爲內容，通過使用display: inline-block;float: left/right;或position: absolute

h1 { 
 
    display: inline-block; 
 
} 
 
hr { 
 
    border-top: 0px solid blue !important; 
 
    padding: 0; 
 
    margin-top: 0.5em !important; 
 
    border-width: 6px !important; 
 
}

<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 
    <div class="row text-center"> 
 
    <h1>HEADER 1</h1> 
 
    </div> 
 
    <div class="row text-center"> 
 
    <h1> 
 
     LARGER HEADER LIKE THIS 
 
     <hr> 
 
    </h1> 
 
    </div> 
 
</div>

匹配

來源

2017-05-25 17:03:16

-2

你可以」相同這樣做。 h1是一個塊元素，無論文本大小如何，其容器的寬度均爲100％。 hr無法知道文本寬度，除非您使用JavaScript計算並將其應用於此。請記住，你必須不斷重新計算它的字體大小的改變，窗口大小變化等

你能做什麼，不過，是給h1的inline-block顯示，則：

申請underline
的text-decoration添加h1後僞元素和風格，達到hr審美你的願望。

來源

2017-05-25 16:58:22

試試這個簡單的代碼：

<style type="text/css"> 
    .heading { 
     display: inline-block; 
    } 
    hr{ 
     border-bottom: 6px solid blue; 
    } 
</style> 

<div class="row text-center"> 
    <span class="heading"> 
    <h1>LARGER HEADER LIKE THIS <hr></h1> 
    </span> 
</div>

來源

2017-05-25 17:19:36

你可以試試這個，使用邊框h1元素。很難將hr元素的寬度設置爲匹配h1元素，但我們可以通過使用width = max-content將h1寬度調整爲等於文本大小。有關寬度的更多信息，請參閱本文，再加上檢查壓實性列表。 https://developer.mozilla.org/en-US/docs/Web/CSS/width?v=example

爲了獲得最大的兼容性，請使用javascript。使用元標記視口來防止縮放並具有相似的大小。使用行高來正確放置文字。

<html> 
<head> 
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<style> 
h1.example { 
    border-bottom: 6px solid blue !important; 
    padding: .5em; 
    line-height: 50pt; 
    border-width: 6px !important; 
    width: max-content; 

} 
.text-center{ 
    text-align: center; 
} 
</style> 
</head> 
<body> 
<div class="container"> 
     <div class="row text-center"> 
      <h1>HEADER 1</h1> 
     </div> 
     <div class="row text-center"> 
      <h1 class="exampe">LARGER HEADER LIKE THIS</h1> 
      <hr> 
     </div> 
</body> 
</html>

來源

2017-05-25 17:23:27

我想補充一個類名要有所不同小時，並給它100％的寬度。

如果你願意，你也可以嘗試在div結構中定位它。喜歡的東西：

.container .row:nth-child(2) hr { 
     width:100%; 
    }

來源

2017-05-25 17:23:33 mbelmont

如果他的標記完全改變;這將是一場災難。 –

好吧，如果你改變你的標記，obv你的風格將不得不改變。 – mbelmont

我建議乾脆築巢您<h1>和<hr>您希望他們共享相同的公共寬度圍繞一個div;並且您將擁有額外的選擇器來執行此操作。

即<div class="widthwrap"><h1>Heading</h1><hr>然後：

.widthwrap hr { 
    width: $width; 
    max-width: $max; 
    min-width: $min; 
    display: inline-block; 
}

類似的東西;爲更清潔，可擴展和可維護的解決方案。而不是使用全局hr標籤與僞選擇像:after

或者更好，但只是給你具體的獨特hr標籤的類做你會跟喜歡什麼。

即，<hr class="bigwidth">

來源

2017-05-25 17:29:08

您可以在標題元素上使用border-bottom並將「fit-content」分配給width屬性。

但是，請注意，在您的標記中，您不應該在頁面上有超過一個< h1>以用於輔助功能。對於頁面設置大於< h1>大小的<是完全正確的，但如果使用屏幕閱讀器和/或輔助技術（AT）的用戶在標記中的結構不正確，則在導航頁面時遇到問題。

下面是一個例子：

h2 { 
 
    width: -webkit-fit-content; 
 
    width: -moz-fit-content; 
 
    width: fit-content; 
 
    font-size: 50px; 
 
    border-bottom: 6px solid blue; 
 
    margin: auto; 
 
} 
 

 
hr { 
 
    border-top: 0px solid blue !important; 
 
    padding: 0; 
 
    margin-top: 0.5em !important; 
 
    border-width: 6px !important; 
 
    width: 245px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<div id="play" class="container text-center"> 
 
    <div class="row"> 
 
    <h1>HEADER 1</h1> 
 
    </div> 
 
    <hr> 
 
    <div class="row"> 
 
    <h2>LARGER HEADER LIKE THIS</h2> 
 
    </div> 
 
</div>

enter code here

來源

2017-05-25 17:55:42 ciammarino

如何使HR元素與它上面的文本的寬度相同

回答

相關問題