Wie man eine vertikale Regel zwischen Schaltflächen in HTML einfügt

Ich versuche, eine vertikale Regel zwischen zwei Schaltflächen in HTML zu setzen.Wie man eine vertikale Regel zwischen Schaltflächen in HTML einfügt

Es sollte die Tasten trennen, aber stattdessen bewegt sich die Taste nach unten.

Diese

verwandelt sich in dieses:

<button type="button" class="btn btn-default" >button</button> 
<button type="button" class="btn btn-default" style="margin-right: 100px">button </button> 
    <button type="button" class="btn btn-primary" >separate button</button>

für die horizontale Regel: <hr width="1" size="500">

hier die Geige ist:

http://jsfiddle.net/37topjh1/

Quelle

2016-07-29 jenryb

Das hr-Tag wird nicht unterstützt von HTML 5, wenn dies der einzige Ort ist, dass Sie eine Zeile auf Ihrer Seite wollen, schlage ich eine von Tasten eine größere Marge geben und das Hinzufügen einer Grenze -links/grenz-rechts, um diese horizontale Regel darzustellen. – Benneb10

Dies ist nicht unbedingt richtig, das hr-Tag wird zwar in HTML5 unterstützt, Sie können jedoch kein Inline-Styling verwenden. Sie können dieselben Funktionen wie HTML4 ausführen, indem Sie eine Klasse hinzufügen und die Klasse mit Stilen versehen. Es ist immer noch perfekt in HTML5 gültig. - https://www.w3.org/TR/html-markup/hr.html – Lee

@ Benneb10 Ich mag die Idee der Verwendung von Rand rechts auf der zweiten Schaltfläche. Aber wird ein Rand hinzugefügt, um den Rand zu verschieben oder einfach den Knopf zu bewegen? Würde es Ihnen etwas ausmachen, ein Beispiel zu zeigen? – jenryb

ändern display-inline-block:

hr { 
    display: inline-block; 
}

Quelle

2016-07-29 15:26:07 dNitro

-1

Sie inline verwenden sollten: Block;

hr { 
    display: inline-block; 
}

Quelle

2016-07-29 15:26:31 Pirate

sind standardmäßig horizontale Regeln Blockelemente, so dass Sie die display Eigenschaft des hr-inline-block einstellen müssen. Wahrscheinlich möchten Sie auch, dass alles gut ausgerichtet ist. In diesem Fall müssen Sie auch die vertical-align -Eigenschaft aller Elemente auf middle setzen.

button,hr{ 
 
    vertical-align:middle; 
 
} 
 
button:nth-of-type(2){margin-right:100px;} 
 
hr{ 
 
    background:#000; 
 
    border:0; 
 
    color:#000; 
 
    display:inline-block; 
 
    height:40px; 
 
    width:1px; 
 
}

<button>button</button> 
 
<button>button</button> 
 
<hr> 
 
<button>separate button</button>

Quelle

2016-07-29 15:39:04 Shaggy

Wie man eine vertikale Regel zwischen Schaltflächen in HTML einfügt

Antwort

Verwandte Themen