并排显示不同形式的按钮

Question

I have the following code.

<fieldset class=last>
     <button>Refresh</button>
     <button> Clear</button>
</fieldset>
<form method="POST" action="*******">
     <button> Download</button>
</form>

I want all the three buttons to be displayed side by side. Now, the downloadd button is displayed below refresh and clear buttons. How can I do that? Here is the FIDDLE

Answer 1

You can use css for that. Just select <fieldset> and <form> and give it a inline-block like in the demo.

fieldset, form {display:inline-block;}

DEMO (Your FIDDLE but updated with the Css)

Answer 2

In addition to the answer given by 'C Travel' if you want to keep the border and add support for IE7, you might wanna do this:

HTML

<div id="container">
    <fieldset class=last id="one">
        <button>Refresh</button>
        <button> Clear</button>
    </fieldset>
        <form method="POST" action="*******" id="two">
        <button> Download</button>
    </form>
    <div id="clearer"></div>
</div>

CSS

#one, #two{
    display: inline-block;
    *display: inline;
    zoom: 1;
    border: 0;
}

#container{
    border: 1px solid #000;
}

FIDDLE

Or use floats for even wider support:

#one, #two{
    float: left;
    border: 0;
    padding: 10px;
}

#clearer{
    clear: both;
}

#container{
    border: 1px solid #000;
}

FIDDLE