CSS: align two element, to the left and right in the same line WHITHOUT floats
You can use CSS display:table
+ display:table-cell
.
h1 {
display: table;
width: 100%;
margin: 0;
}
h1>span {
text-align: left;
display: table-cell;
}
h1>a {
text-align: right;
display: table-cell;
}
<h1><span>Align me left</span><a href="#">align me right</a></h1>
Or, do it with display:inline-block
.
h1 {
font-size: 0; /* remove whitespace */
}
h1>span,
h1>a {
font-size: 32px;
display: inline-block;
width: 50%;
}
h1>span {
text-align: left;
}
h1>a {
text-align: right;
}
<h1><span>Align me left</span><a href="#">align me right</a></h1>
Note, either way above will make the <a>
clickable area larger, wrap it into another <span>
if you need to correct that.
You can use some flexbox magic:
h1 {
display: flex;
justify-content: space-between;
}
<h1>
<span>Align me left</span>
<a href="">align me right</a>
</h1>