Horizontale Ausrichtung zu den Rändern, ohne die vertikale Ausrichtung zu verlieren

Question

In HTML habe ich zwei Elemente, eines mit Text und eines mit ein paar Knöpfen.

Statt in der Mitte berühren, ich möchte, dass sie im Abstand zu den linken und rechten Rand auszurichten. Also möchte ich, dass mein Text am linken Rand ausgerichtet ist und meine Schaltflächen am rechten Rand ausgerichtet sind, , ohne ihre vertikale Ausrichtung zu verlieren, wie es ist.

ich auch passieren, 3. Bootstrap verwenden werden

Wenn ich pull-left verwenden/pull-right, float:left/float:right oder align="left"/align="right", erhalte ich eine Änderung in der vertikalen Ausrichtung dieser beiden Elemente.

Gepaart unten Code sieht wie folgt aus im Wesentlichen:

<div style="width:200px;height:100px"> 
    Delete dashboard? 
    <button class="btn btn-secondary cancel"> 
     Cancel 
    </button> 
    <button class="btn btn-danger"> 
     Delete 
    </button> 
</div> 

Was ist die einfachste Möglichkeit, diese Elemente in die linken und rechten Rand ausrichten? Ich kann es mit einem Tisch machen, aber ist das nicht der ideale Weg?

[! [A modal Beispiel] [2]] [2]

Answer 1

ohne den Code zu sehen, würde ich ein Flex-Layout verwenden. Der Schlüssel in einem Flex row ist justify-content: space-between zu verwenden, um 2 Kinder in der Reihe zu den fernen Kanten zu schieben. Dann wird align-items auf dem Eltern die vertikale Ausrichtung festlegen.

.flex { 
 
    display: flex; 
 
} 
 
.col { 
 
    flex-direction: column; 
 
    max-width: 250px; 
 
    border: 1px solid black; 
 
} 
 
.bot { 
 
    border-top: 1px solid #ccc; 
 
    justify-content: space-between; 
 
    align-items: center; 
 
}

<div class="flex col"> 
 
    <div> 
 
    <h1>confirm</h1> 
 
    </div> 
 
    <div class="flex bot"> 
 
    <p>delete dashboard</p> 
 
    <div> 
 
     <button>cancel</button> 
 
     <button>delete</button> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

Was ist das?

<div class="row"> 
    <div class="col-md-6">Dashboard</div> 
    <div class="col-md-6 text-right">Cancel Delete</div> 
</div> 

Dies wird Ihre Fläche in zwei Spalten aufgeteilt, wobei der gesamte Inhalt der rechten Spalte wird rechts ausgerichtet werden, ohne dass sich die CSS der Elemente zu beeinflussen.