对齐跨度和小标签

时间:2014-06-06 11:44:12

标签: html css twitter-bootstrap

我有一些像这样的HTML:

<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>

看起来像:

Hello World
Hello second time World

但是我想将小标签安排到列以及span标签中,所以它看起来像这样:

Hello              World
Hello second time  World

我使用bootstrap进行样式化,并尝试分配小标签col-md类进行操作,但它并没有按照我想要的方式进行对齐。

有什么建议吗?

1 个答案:

答案 0 :(得分:2)

您应该可以使用以下样式实现此目的:

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

Example

抱歉,只是在Chrome中测试过并且无法正常工作,对于需要添加的chrome

small {float:left; clear:both;}

Example