Wie man zwei Spannenelemente getrennt aber in der gleichen Linie justiert

Question

Ich arbeite an der Ausrichtung zwei span Elemente sollten in der gleichen Linie vorhanden sein aber getrennt haben, wie unten gezeigt. Der Code, den ich verwende, ist unten.

Wenn ich nicht float:right benutze, kommen die beiden Texte in einer Zeile mit aneinanderzufügen.

Wenn ich float:right; verwenden, sind sie nicht in der gleichen Linie ausgerichtet, mit einer Fehlausrichtung zwischen ihnen.

mit float:right; das Ergebnis wird sein, diese

ohne float:right; das Ergebnis wird sein, diese

Bitte geben Sie mir Anregungen für diese

.clearSpan { 
 
    color: $alt-dark-blue; 
 
    float: right; 
 
    cursor: pointer; 
 
    clear: both; 
 
    font-size: 10px; 
 
} 
 

 
.saveSpan { 
 
    color: $alt-dark-blue; 
 
\t clear : both; 
 
    cursor: pointer; 
 
    font-size: 10px; 
 
}

<div> 
 
    <span class="saveSpan" >Save as Default Filters</span> 
 
    <span class="clearSpan" >Clear All Filters</span> 
 
</div>

Answer 1

Sie flexbox für die

div { 
 
    display: flex; 
 
    justify-content: space-between; 
 
    border-bottom: 1px solid grey 
 
} 
 
span { 
 
    color: blue; 
 
    cursor: pointer; 
 
    font-size: 10px; 
 
}

<div> 
 
    <span class="saveSpan">Save as Default Filters</span> 
 
    <span class="clearSpan">Clear All Filters</span> 
 
</div>

Answer 2

verwenden Vielleicht können Sie tun:

.clearSpan { 
    margin-left: 15px; 
} 

oder

.saveSpan { 
    margin-right: 15px; 
} 

Das sollte es trennen.

Answer 3

Sie benötigen einen Stil für die span-Tags wie in einem Blockelement .e.g

span { 
    display: inline-block; 
}