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

Question

I need to position the 'previous' on the left side of the li and the 'next' to the right so that they are shown in one line. How can I achieve this?

<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

It's easier if you change the order of the nodes in the document:

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

I added an "align" class to the three blocks and styled it:

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

Added CSS code

.right{ float:right !important; }

Included the class to tag

Answer 3

You can try this :-

<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