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

这样的事情会起作用：

EXAMPLE HERE

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

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

2 个答案: