Größe der unteren Rand auf ein Überschrift Element, um die Textbreite passen und auch reagieren

Question

Ich möchte den unteren Rand enger und reaktionsfähig machen, während Text zentriert zur gleichen Zeit. Wie könnte ich das erreichen? Ich habe versucht, Breite Eigenschaft explizit zu verwenden, aber das funktioniert anscheinend nicht.

DEMO: https://www.bootply.com/jEB0e4Ao61

h1 { 
 
    border-bottom: 1px solid orange; 
 
    padding-bottom: 5px; 
 
    width: 400px; 
 
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 
 
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<div class="container text-center features"> 
 
    <h1>Features</h1><br> 
 
</div>

Answer 1

Sie müssen zwei Dinge tun:

1. Verwendung display:inline-block;
2. gesetzt width: auto

Wechsel von einem Blockelement, so dass die Grenze, die die Breite des Textes der Größe wird:

<h1> ist ein block Element, das mit 100% Breite der automatisch dehnt Container. Wenn Sie die Breite auf auto oder einen Prozentsatz einstellen, wird die Standardbreite angewendet, d. h. 50% entsprechen 50% der Breite des Containers.

Mit inline-block und Breite auto wird die Überschrift nur so breit wie die Überschrift selbst, was bedeutet, dass Sie keine Medienabfragen für verschiedene Bildschirmgrößen benötigen. Dadurch wird die Grenze genau der Breite der Überschrift angepasst.

Um die „unterstreichen“ erweitern breiter als die Textbreite zu machen:

Wenn Sie auf den Seiten der Überschrift zusätzlichen Platz haben möchten, Sie padding verwenden können, dies zu tun. Zum Beispiel:

padding-left:20px; padding-right:20px; 

werden 20 Pixel zu beiden Seiten der Position hinzuzufügen, die Elementbreite erstreckt, die auch die untere Grenze von 20 Pixel auf beiden Seiten erstreckt.

Arbeits Demo:

h1 { 
 
    border-bottom: 1px solid orange; 
 
    display: inline-block; 
 
    width: auto; 
 
    text-align: center; 
 
    margin: auto; 
 
    padding: 0 20px 5px; /* this adds 20px to the sides, extending the border */ 
 
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 
 
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<div class="container text-center features"> 
 
    <h1>Features</h1><br> 
 
</div> 
 
<p>The "underline" for this heading extends 20px either side of the text by setting the left and width padding to 20px</p>

Answer 2

können Sie display: inline-block verwenden und die Zentrierung funktioniert.

Siehe Demo unten, wenn ich die width als 400px gesetzt (Sie Medien fragt können width für Ansprechempfindlichkeit einzustellen):

h1 { 
 
    border-bottom: 1px solid orange; 
 
    padding-bottom: 5px; 
 
    display: inline-block; 
 
    width: 400px; 
 
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 
 
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<div class="container text-center features"> 
 
    <h1>Features</h1><br> 
 
</div>