How can I create a border around an input button?

Here's a fiddl开发者_如何学Ce

I have this code where I tried to make a button have a blue line around it. But when I ran the code I just get a blue line at the top of the button. I added disply: inline-block but that doesn't seem to work. Is there some way I can make the div's border surround the input button?

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

Why all those divs?

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

Remove "float: left" from your input and add it to the surrounding div.

Setting height on a DIV that wraps INPUT can help:

<div id="A">
   <div style="border: 1px solid Blue; height: 20px;">
      <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>

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

If you want the text ABC inside the blue border you have to move it inside the div with the border, combined with the height "trick" as suggested by spektom.

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