I'm doing a website project, with using a Materialize Framework.
There is a line of text where i would like to align all of the colon vertically. this is the example of the text:
Project:Intimate House
Location : Pulau Putri, Puri - West Jakarta - Indonesia
Site Area : 160 sqm
Building Area : 210 sqm
Design Phase : 2016
Construction Period : April 2016 - July 2017
and this is the result of the vertically aligned colon that i want
Project : Intimate House
Location : Pulau Putri, Puri - West Jakarta - Indonesia
Site Area : 160 sqm
Building Area : 210 sqm
Design Phase : 2016
Construction Period : April 2016 - July 2017
Below is my code that i try to create( https://codepen.io/bukuchaga/pen/xJNdeq ) HTML:
<h4><b>Intimate House</b><br></h4> <ul> <li><b>Project:</b>Intimate House</li> <li><b>Location :</b> Pulau Putri, Puri - West Jakarta - Indonesia</li> <li><b>Site Area :</b> 160 sqm</li> <li><b>Building Area :</b> 210 sqm</li> <li><b>Design Phase :</b> 2016</li> <li><b>Construction Period :</b> April 2016 - July 2017</li> </ul>
Based on my research before, i found a question that maybe similar to my question.( Vertical align colon with numbers )
The problem is after i tried to apply the answer, it's still not working on my code, rather it turns my line of text became out of place from how it should be and i have tried several others method and still not working.
Thank you before.
I would suggest removing the colon from the HTML and using a ::after
pseudo element instead.
.alignMe b { display: inline-block; width: 50%; position: relative; padding-right: 10px; /* Ensures colon does not overlay the text */ } .alignMe b::after { content: ":"; position: absolute; right: 10px; }
<ul class="alignMe"> <li><b>Project</b> Intimate House</li> <li><b>Location</b> Pulau Putri, Puri - West Jakarta - Indonesia</li> <li><b>Site Area</b> 160 sqm</li> <li><b>Building Area</b> 210 sqm</li> <li><b>Design Phase</b> 2016</li> <li><b>Construction Period</b> April 2016 - July 2017</li> </ul>
Move the colon to after the b
and use CSS-Tables
ul { list-style: none; display: table; } li { display: table-row; } b { display: table-cell; padding-right: 1em; }
<ul> <li><b>Project</b>: Intimate House</li> <li><b>Location</b>: Pulau Putri, Puri - West Jakarta - Indonesia</li> <li><b>Site Area</b>: 160 sqm</li> <li><b>Building Area</b>: 210 sqm</li> <li><b>Design Phase</b>: 2016</li> <li><b>Construction Period</b>: April 2016 - July 2017</li> </ul>
One of feasible way is to set min-width
to <b>
tag and add a colon after it. Simple example:
ul.info-list { list-style-type: none; } ul.info-list li b { position: relative; display: inline-block; min-width: 144px; margin-right: 4px; } ul.info-list li b:after { content: ":"; position: absolute; right: 0; }
<ul class="info-list"> <li><b>Project</b>Intimate House</li> <li><b>Location</b> Pulau Putri, Puri - West Jakarta - Indonesia</li> <li><b>Site Area</b> 160 sqm</li> <li><b>Building Area</b> 210 sqm</li> <li><b>Design Phase</b> 2016</li> <li><b>Construction Period</b> April 2016 - July 2017</li> </ul>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.