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

问题描述

| 这是一个小提琴 我在这段代码中尝试使按钮周围有蓝线。但是，当我运行代码时，我仅在按钮顶部显示一条蓝线。我加了“ 0”，但这似乎不起作用。有什么方法可以使

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>

    

解决方法

        为什么所有这些div？ 参见演示小提琴。 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;
}

    ,        从输入中删除\“ float：left \”，并将其添加到周围的div中。     ,        在包裹INPUT的DIV上设置高度可以帮助：

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

    ,        如果要将文本ABC放在蓝色边框内，则必须将其在带有边框的div内移动，并结合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>