Question

我需要在li的左侧放置'previous'，在右边放置'next'，以便它们显示在一行中。我怎样才能做到这一点？

<ul style= 'list-style-type: none;'  class="filter1">
    <li><span class="filtercat1">red</span></li>
    <li><span class="filtercat1">blue</span></li>
    <li><span class="filtercat1">yellow</span></li>
    <li><span class="filtercat1">all</span></li>
</ul>


<span id="filterbutton1">
    <a href="#" id="prev">« Previous</a> 
    <a href="#" id="next">Next »</a>

http://jsfiddle.net/BlacBunny/5tfcuy1w/12/

Answer 1

如果更改文档中节点的顺序，则会更容易：

<a href="#" id="prev" class="align">« Previous</a> 
<ul style= 'list-style-type: none;'  class="filter1 align">
    <li><span class="filtercat1">red</span></li>
    <li><span class="filtercat1">blue</span></li>
    <li><span class="filtercat1">yellow</span></li>
    <li><span class="filtercat1">all</span></li>
</ul>
<a href="#" id="next" class="align">Next »</a>

我在三个街区添加了一个“对齐”类并设置了样式：

.align {
   float: left;
   display: inline-block;
   margin: 5px;
   padding: 5px;
   min-width: 80px;
   text-align: center;
}

http://jsfiddle.net/b0m3xk6z/

Answer 2

http://jsfiddle.net/5tfcuy1w/13/

添加了CSS代码

.right{ float:right !important; }

包含要标记的类

Answer 3

你可以试试这个： -

<ul><li><a href="#"  id="prev">Previous</a></li>
    <li>
<ul style= 'list-style-type: none;'  class="filter1">
        <li><span class="filtercat1">red</span></li>
        <li><span class="filtercat1">blue</span></li>
        <li><span class="filtercat1">yellow</span></li>
        <li><span class="filtercat1">all</span></li>
    </ul>
</li>
<li><a href="#" id="next">Next</a></li>
</ul>

LINK

如何将这些ul，li和span放在一行？

3 个答案: