CODEWITHSUNDEEP
javascripthtmlcss
Adam Gilly
Adam Gilly

Reputation: 59

How to align two span elements separately but in same line

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

ss

without float:right; the result will be this

ss1

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>

Upvotes: 2

Views: 5337

Answers (3)

David R
David R

Reputation: 15639

You need to define a style for your span tags as,

span {
   display: inline-block;
}

Upvotes: 0

Grommy
Grommy

Reputation: 367

Maybe you can do:

.clearSpan {
    margin-left: 15px;
}

or

.saveSpan {
    margin-right: 15px;
}

That should separate it.

Upvotes: 0

dippas
dippas

Reputation: 60543

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>

Upvotes: 2

Related Questions