Question

我有一些像这样的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类进行操作，但它并没有按照我想要的方式进行对齐。

有什么建议吗？

Answer 1

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

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

对齐跨度和小标签

1 个答案: