并排显示不同形式的按钮

Question

我有以下代码。

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

我希望所有三个按钮并排显示。 现在，已下载的按钮显示在刷新和清除按钮下方。 我怎样才能做到这一点？ 这是FIDDLE

Answer 1

您可以为此使用CSS。 只需选择<fieldset>和<form> ，然后像演示中一样为其提供inline-block 。

fieldset, form {display:inline-block;}

演示 （您的FIDDLE，但已使用CSS更新）

Answer 2

如果您想保留边框并添加对IE7的支持，除了“ C Travel”给​​出的答案以外，您可能还想这样做：

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

小提琴

或使用浮点数提供更广泛的支持：

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

#clearer{
    clear: both;
}

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

小提琴