vertikale Position eines A-Elements und Button-Elements

Ich möchte ein <button> und <a> Element beide im selben Format formatieren. Ich verwende den folgenden Code ein:vertikale Position eines A-Elements und Button-Elements

button, 
 
a { 
 
    border: solid 1px black; 
 
    background-color: white; 
 
    color: black; 
 
    font-family: 'Arial'; 
 
    padding: 0 15px; 
 
    font-size: 13px; 
 
    height: 35px; 
 
    line-height: 35px; 
 
    display: inline-block; 
 
} 
 
#dummy-block { 
 
    background-color: black; 
 
    padding: 0; 
 
    margin: 0; 
 
    height: 20px; 
 
}

<div id="dummy-block"></div> 
 
<button>My Button</button> 
 
<a>My Link</a>

Aber das <button> Element scheint die Höhe zu ignorieren und mein <a> Element nicht berührt den Rand des schwarzen Dummy <div> oben:

enter image description here

Sie können den Code in meiner Geige testen: http://jsfiddle.net/gyrrcrqc/1/

Quelle

2014-11-13 Simon

Sie 'float verwenden können: left' Statt of'display: inline-block;' –

@Maddy: Vielen Dank für Ihre Antwort. Aber ich möchte nach all meinen Schaltflächenzeilen keinen Clearfix hinzufügen. – Simon

Versuchen Sie, Rand 0 zu geben, damit es die Dummy-Div. Berührt. Versuchen Sie, die Polsterung von der Schaltfläche zu entfernen, um die Höhe arbeiten zu lassen. –

Versuchen Sie folgendes: -

button, a { 
    background-color: white; 
    border: medium none; 
    box-shadow: 0 0 1px #000 inset; 
    color: black; 
    display: inline-block; 
    font-family: "Arial"; 
    font-size: 13px; 
    height: 35px; 
    line-height: 35px; 
    padding: 0 15px; 
    vertical-align: top; 
}

Oder: -

button, a { 
    background-color: white; 
    border: medium none; 
    vertical-align:top; 
    color: black; 
    display: inline-block; 
    font-family: "Arial"; 
    font-size: 13px; 
    height: 35px; 
    line-height: 35px; 
    padding: 0 15px; 
    border:1px solid #000; 
    box-sizing:border-box 
}

DEMO2

DEMO

Quelle

2014-11-13 11:21:45

Vielen Dank für Ihre Antwort. Die Schaltfläche berührt nun die Kante des darüber liegenden Bereichs.Aber wenn Sie genau hinschauen, können Sie sehen, dass das a-Element höher ist als das Button-Element. Du hast nur einen Teil meines Problems gelöst. – Simon

Dieses Problem wegen der Grenze, 'Knopf' nehmen den Rand innen und' a' nehmen draußen. versuche die update Antwort möge es dir helfen –

Versuchen Sie, vertical-align: bottom zu button, a Selektor

button, a 
 
{ 
 
    border: solid 1px black; 
 
    background-color: white; 
 
    color: black; 
 
    font-family: 'Arial'; 
 
    padding: 0 15px; 
 
    font-size: 13px; 
 
    height: 35px; 
 
    line-height: 35px; 
 
    display: inline-block; 
 
    vertical-align: top; 
 
} 
 

 
#dummy-block 
 
{ 
 
    background-color: black; 
 
    padding: 0; 
 
    margin: 0; 
 
    height: 20px; 
 
}

<div id="dummy-block"></div> 
 

 
<button>Okay</button> 
 
<a>Edit</a>

Quelle

2014-11-13 11:15:32 user3687550

Vielen Dank für Ihre Antwort. Auch in Ihrem Beispiel hat das Element a nicht die gleiche Höhe wie das Schaltflächenelement. – Simon

@Simon Sie haben schreiben Unterschiedliche Höhe für 'Knopf' und 'a', weil Knopf hat Standardwert – user3687550

a 
    { 
     padding:1px 15px; 
    } 
    button,a 
    { 
     border: solid 1px black; 
     background-color: white; 
     color: black; 
     font-family: 'Arial'; 

     font-size: 13px; 
     height: 35px; 
     line-height: 35px; 
     display: inline-block; 

    } 
    button 
    { 
     padding: 0 15px;  
    }

Quelle

2014-11-13 11:36:29

Anscheinend ist der Standard-Box-Sizing Verfahren zur Schaltfläche ist border-box während die für Inline-Block content-box ist. Also:

35px Höhe bedeutet die <a> ist eigentlich 37px hoch (Grenze fügt 2px)
35px Höhe bedeutet das <button> Tag ist 35px hoch (35px umfasst die Grenze)

Setzen Sie die box-sizing: border-box auf beide Elemente.

button, 
 
a { 
 
    border: solid 1px black; 
 
    background-color: white; 
 
    color: black; 
 
    font-family: 'Arial'; 
 
    padding: 0 15px; 
 
    font-size: 13px; 
 
    height: 35px; 
 
    line-height: 35px; 
 
    display: inline-block; 
 
    box-sizing: border-box; 
 
} 
 
#dummy-block { 
 
    background-color: black; 
 
    padding: 0; 
 
    margin: 0; 
 
    height: 20px; 
 
}

<div id="dummy-block"></div> 
 
<button>My Button</button> 
 
<a>My Link</a>

Quelle

2014-11-13 12:01:07

Du brauchst noch 'vertical-align: top' in' button, a' um die erste Frage des Fragestellers zu lösen (stelle sicher das der Rand des Ankerelements das '# dummy-block' Element berührt) –

vertikale Position eines A-Elements und Button-Elements

Antwort

Verwandte Themen