並排顯示不同形式的按鈕

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

小提琴