CSS：如何在同一行创建两个部分？

Question

我试图将这些wo部分放在右边<ul>部分和<span>部分的同一行，但是，我找不到如何。

PS：我在这里使用bootstrap 。

<ul class="pagination pagination-sm">
        <li class="disabled"><a href="#">&laquo;</a></li>
        <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
        <li><a href="#">2 </a></li>
        <li><a href="#">3 </a></li>
        <li><a href="#">4 </a></li>
        <li><a href="#">5 </a></li>
        <li><a href="#">&raquo;</a></li>
</ul>
<span>
        <a href="~/AppsMetiers/Ajouter/"><span class="glyphicon glyphicon-plus"></span><span style="margin-left:10px;margin-right:6px;">Nouveau</span></a> |
        <span style="margin-left:5px;"><a href="~/AppsMetiers/Tria/"><span class="glyphicon glyphicon-arrow-up"></span><span style="margin-left:10px;"></span></a></span>|
        <span style="margin-left: 5px;"><a href="~/AppsMetiers/Index/"><span class="glyphicon glyphicon-arrow-down"></span><span style="margin-left:10px;"></span></a></span>
</span>

请问有什么建议吗？

非常感谢 ！

Answer 1

像这样的东西会起作用：

这里的例子

.pagination.pagination-sm + span {
    vertical-align:top;
    display:inline-block;
    margin:25px 0 25px 10px;
}

使相邻的span元素inline-block ，将其对齐到顶部并添加边距以匹配.pagination元素。 这假设标记将保持不变。

Answer 2

尝试在两个部分周围添加分区，并将两个分区浮动在一起。 这是一个jsfiddle 。 查看CSS以了解如何浮动。

<div class="cont-1">
... pagination code ...
</div>

<div class="cont-2">
... span and anchor codes ...
</div>

在代码的最后，确保清除浮动。

<div class="clear"></div>