Question

我有这个代码，我试图让按钮周围有一条蓝线。但是当我运行代码时，我只是在按钮顶部看到一条蓝线。我添加了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

从输入中删除“float：left”并将其添加到周围的div。

Answer 2

为什么所有这些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;
}

Answer 3

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

Answer 4

在包装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>

Answer 5

如果您希望文本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>

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

5 个答案: