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

DEMO （您的FIDDLE，但使用Css更新）

Answer 2

除了'C Travel'给出的答案，如果你想保留边框并添加对IE7的支持，你可能想要这样做：

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

或使用花车获得更广泛的支持：

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

#clearer{
    clear: both;
}

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

FIDDLE

并排显示不同形式的按钮

2 个答案: