How to align two span elements separately but in same line
Adam Gilly
I am working on aligning two span elements should be present in same line but have separated as shown in below. The code i am using is below.
If I do not use float:right the both texts are coming in single line with attaching one each other.
If I use float:right; they are not aligning in same line, having some misalignment between them.
with float:right; the result will be this
without float:right; the result will be this
Please give me suggestions for this
.clearSpan {
color: $alt-dark-blue;
float: right;
cursor: pointer;
clear: both;
font-size: 10px;
}
.saveSpan {
color: $alt-dark-blue;
clear : both;
cursor: pointer;
font-size: 10px;
}<div>
<span class="saveSpan" >Save as Default Filters</span>
<span class="clearSpan" >Clear All Filters</span>
</div>
dippas
you can use flexbox for that
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>Collected from the Internet
Please contact [email protected] to delete if infringement.
edited at
- Prev: How can I share an Entity for other entities' OneToMany
- Next: how to prevent allowing null values in a table
Related
Related Related
- 1
How to align two elements in the same line,without overlap
- 2
How to align two elements and keep them on the same line
- 3
Align two elements on the same line in the same <td> tag
- 4
HTML, align two elements on both sides of the same line
- 5
Align Label with Span on Same Line - CSS
- 6
CSS Display span and button elements on same line in container div with text-align: center
- 7
Align two li in same line
- 8
How to align 2 elements on the same line with the second one on priority?
- 9
How to align two input boxes on same line but either ends
- 10
How to align two paragraphs to the left and right on the same line?
- 11
How to align two text boxes on same line with CSS
- 12
How to align two svg masked images on the same line
- 13
How to align two input boxes on same line but either ends
- 14
How to properly align the span and input elements?
- 15
How to align 3 span in one line horizontaly?
- 16
How to align 3 span in one line horizontaly?
- 17
Need to align elements inside a div to be on the same line
- 18
Two same span elements but have different width
- 19
Two same span elements but have different width
- 20
Align the two <p> element in the same line
- 21
Align the two <p> element in the same line
- 22
Align two divs in one line but they are not in a same element?
- 23
how to make sure two inline elements stay on the same line
- 24
How would I make these two elements on the same line?
- 25
Center-align elements on the same line and in the same container
- 26
In HTML5, how do I align multiple elements to appear on the same line in a list definition?
- 27
How to align html elements in a single line?
- 28
How to wrap two dynamically created elements with span?
- 29
How to align two <div> tags horizontally in the same line inside a main <div> tag?
Comments