CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Mefhisto1
Mefhisto1

Reputation: 2228

Aligning span and small tags

I have some html like this:

<ul>
    <li>
        <small class="text-muted text-small" style="display:inline-block" >Hello</small>
        <span style="display:inline-block"> World</span>

        <small class="text-muted text-small" style="display:inline-block" >Hello second time</small>
        <span style="display:inline-block"> World</span>
    </li>
</ul>

It will look like: 

Hello World
Hello second time World

But I want to arrange small tags into columns as well as span tags, so it will look like this:

Hello              World
Hello second time  World

I'm using bootstrap for styling, and tried assigning small tags col-md classes to manipulate, but it's not aligning as I'd want it to.

Any suggestions ?

Upvotes: 0

Views: 168

Answers (1)

Pete
Pete

Reputation: 58442

You should be able to achieve this with the following styles:

li {display:inline-block;}
span {float:right; margin-left:1em;} 
/*the margin can be however large you want the gap between the words*/

Example

sorry just tested in chrome and didn't work properly, for chrome you need to add

small {float:left; clear:both;}

Example

Upvotes: 2

Related Questions