I am trying to align two inline elements, one to the left and one to the right. I\'d like to accomplish this without using floats.
In my case, I have a h1, with a sp
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;
}
Align me leftalign me right
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;
}
Align me leftalign me right
Note, either way above will make the clickable area larger, wrap it into another if you need to correct that.