Wie vermeidet man, dass ein <a> mit display: Block ganze Breite nimmt?

Ich erstelle eine Schaltfläche in einer eigenen Zeile dank display: block. Aber warum braucht es die ganze Breite? Wie kann man stattdessen die normale Breite des Textes innerhalb der Schaltfläche verwenden?Wie vermeidet man, dass ein <a> mit display: Block ganze Breite nimmt?

html, body { width: 100%; height: 100%; } 
 
#a { width: 100%; height: 100%; background-color: red; } 
 
#b { background-color: blue; display: block; }

<div id="a"> 
 
<div>This is a button in its own line, thanks to "display: block"</div> 
 
<a id="b">Button</a> 
 
<div>Something else</div> 
 
</div>

Quelle

2017-12-15 Basj

, dass die Definition von 'Block' Verhalten. Wenn Sie dieses Verhalten nicht möchten, verwenden Sie wahrscheinlich "display: inline-block;" oder fügen Sie die Schaltfläche in ein Element ein, das ihre Breite einschränkt. –

@omkara es gibt keine Notwendigkeit für bootstrap in diesem Fall, auch OP nie erwähnt, dass er beabsichtigt, 3rd Party –

zu verwenden Sie brauchen auch nicht 'Breite: 100%' für HTML, Körper oder ein Div, wie dies der Standard ist Verhalten für diese Elemente auf Blockebene. –

Ein Blockelement standardmäßig die volle Breite dauert es Eltern. So verwenden Sie stattdessen inline-block

html, 
 
body { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
#a { 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: red; 
 
} 
 

 
#b { 
 
    background-color: blue; 
 
    display: inline-block; 
 
}

<div id="a"> 
 
    <div>This is a button in its own line, thanks to "display: block"</div> 
 
    <a id="b">Button</a> 
 
    <div>Something else</div> 
 
</div>

Quelle

2017-12-15 11:30:53 LinkinTED

Geben Sie ihm einen display:inline-block; und es verhält sich wie Sie wollen.

Arbeitsbeispiel

html, 
 
body { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
#a { 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: red; 
 
} 
 

 
#b { 
 
    background-color: blue; 
 
    display: inline-block; 
 
}

<div id="a"> 
 
    <div>This is a button in its own line, thanks to "display: block"</div> 
 
    <a id="b">Button</a> 
 
    <div>Something else</div> 
 
</div>

Quelle

2017-12-15 11:30:43

Wie vermeidet man, dass ein <a> mit display: Block ganze Breite nimmt?

Antwort

Verwandte Themen