css - 如何在输入按钮周围创建边框？

Question

这是一个 fiddle

我有这段代码，我试图让一个按钮周围有一条蓝线。但是当我运行代码时，我只是在按钮顶部看到一条蓝线。我添加了 disply: inline-block 但这似乎不起作用。有什么方法可以让 div 的边框包围输入按钮吗？

<div id="A">
   <div style="border: 1px solid Blue">
      <input style="float: left; display: block" type="button" onclick="doTest('total'); return false;" />
   </div>
   <div id="B" style="display: block; float: left;">ABC</div>
</div>

Answer 1

为什么要那么多 div？

参见 demo Fiddle .

HTML:

<form id="A" action="">
    <fieldset>
        <span><input id="button1" type="button" value="Caption" onclick="" /></span>
        <label id="B" for="button1">ABC</label>
    </fieldset>
</form>

CSS:

#A span {
    border: 1px solid blue;
}