Align span text within li element - html

Question

Using dataTables, I have a responsive table that produces the following HTML within the child row
<ul data-dtr-index="0" class="dtr-details">
<li data-dtr-index="0" data-dt-row="0" data-dt-column="0">
<span class="dtr-title">Pay No</span>
<span class="dtr-data">999</span>
</li>
<li data-dtr-index="3" data-dt-row="0" data-dt-column="3">
<span class="dtr-title">DOB</span>
<span class="dtr-data">14 Sep 1951</span>
</li>
</ul>
Using CSS, I would like the second span in each li (dtr-data) to have the text aligned to the right. Is this possible in CSS without having to amend the DOM to put the span in a div tag? Ideally I do not want to create my own custom rendere, so to be able to align the span text through CSS only would be ideal

Answer 1

You could use flexbox for this.
This would reset the li display property, which removes the bullet point, so you would need to reintroduce it.
Example:
li {
display: flex;
margin-left: -1em;
}
li:before {
content: '•';
padding-right: .5em;
}
.dtr-data {
margin-left: auto;
}
<ul data-dtr-index="0" class="dtr-details">
<li data-dtr-index="0" data-dt-row="0" data-dt-column="0">
<span class="dtr-title">Pay No</span>
<span class="dtr-data">999</span>
</li>
<li data-dtr-index="3" data-dt-row="0" data-dt-column="3">
<span class="dtr-title">DOB</span>
<span class="dtr-data">14 Sep 1951</span>
</li>
</ul>

Answer 2

You can make the li relative, and the span absolute right:0px. (or use float:right)
li {
position: relative;
}
li span:nth-child(2){
position: absolute;
right: 0px;
}

Answer 3

Method 1
float the nested element in question (.dtr-data).
Code Snippet Demonstration:
.dtr-data {
float: right;
}
li {
max-width: 300px; /* for the sake of demonstration */
clear: both; /* clear floats for good measure */
}
<ul data-dtr-index="0" class="dtr-details">
<li data-dtr-index="0" data-dt-row="0" data-dt-column="0">
<span class="dtr-title">Pay No</span>
<span class="dtr-data">999</span>
</li>
<li data-dtr-index="3" data-dt-row="0" data-dt-column="3">
<span class="dtr-title">DOB</span>
<span class="dtr-data">14 Sep 1951</span>
</li>
</ul>
Method 2
float the nested sibling element (.dtr-title) and declare text-align on containing parent.
Code Snippet Demonstration:
.dtr-title {
float: left;
}
li {
max-width: 300px; /* for the sake of demonstration */
clear: both; /* clear floats for good measure */
text-align: right;
}
<ul data-dtr-index="0" class="dtr-details">
<li data-dtr-index="0" data-dt-row="0" data-dt-column="0">
<span class="dtr-title">Pay No</span>
<span class="dtr-data">999</span>
</li>
<li data-dtr-index="3" data-dt-row="0" data-dt-column="3">
<span class="dtr-title">DOB</span>
<span class="dtr-data">14 Sep 1951</span>
</li>
</ul>
Method 3
Declare flex on the containing parent element and align accordingly with justify-content property.
Code Snippet Demonstration:
li {
max-width: 300px; /* for the sake of demonstration */
display: flex; /* required for following property to apply */
justify-content: space-between; /* to align end-to-end */
}
<ul data-dtr-index="0" class="dtr-details">
<li data-dtr-index="0" data-dt-row="0" data-dt-column="0">
<span class="dtr-title">Pay No</span>
<span class="dtr-data">999</span>
</li>
<li data-dtr-index="3" data-dt-row="0" data-dt-column="3">
<span class="dtr-title">DOB</span>
<span class="dtr-data">14 Sep 1951</span>
</li>
</ul>
A note on flex-box:
Since flex-box has limited to no support for legacy browsers (like I.E) for full browser support and compatibility refer to either one of the aforementioned alternatives.
See browser compatibility:
caniuse.com
flex - CSS | MDN
Method 4
position the nested element in question (.dtr-data) as absolute and offset alignment by declaring a right property value, declare relative positioning on the containing parent element so that the absolutely nested child element is positioned relative to its parent.
note: this solution will most likely require responsive adjustments
Code Snippet Demonstration:
li {
max-width: 300px; /* for the sake of demonstration */
position: relative; /* required */
}
.dtr-data {
position: absolute;
right: 0;
}
<ul data-dtr-index="0" class="dtr-details">
<li data-dtr-index="0" data-dt-row="0" data-dt-column="0">
<span class="dtr-title">Pay No</span>
<span class="dtr-data">999</span>
</li>
<li data-dtr-index="3" data-dt-row="0" data-dt-column="3">
<span class="dtr-title">DOB</span>
<span class="dtr-data">14 Sep 1951</span>
</li>
</ul>