如何在輸入按鈕周圍創建邊框？

我有這個代碼，我試圖讓一個按鈕有一個藍色的線周圍。但是當我運行代碼時，我只是在按鈕的頂部看到一條藍線。我添加了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>

來源

2011-06-11 Derek J

爲什麼所有這些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; 
}

來源

2011-06-11 14:55:55 NGLN

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

來源

2011-06-11 14:02:00 sudipto

刪除「浮動：左」從你的輸入，並把它添加到周圍的股利。

來源

2011-06-11 14:02:24

打我給它幾秒鐘！ – 2011-06-11 14:03:12

但是文本出現在按鈕的下面，這不是我想要的:-( – 2011-06-11 14:09:14

嘗試使用SPAN而不是DIV或「display：inline」。這會將您的元素排成一排。 – 2011-06-11 17:54:21

對包裝INPUT可以幫助格設置高度：

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

來源

2011-06-11 14:03:49 spektom

這對我嘗試時沒有幫助在小提琴上:-( – 2011-06-11 14:09:59

哼..奇怪，我在這裏看到藍色的邊框：http://jsfiddle.net/JWaXf/3/ – spektom 2011-06-11 14:41:01

如果你想你必須把它移到與邊框的DIV中的藍色邊框內的文本ABC，與高度結合的「絕招「如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>

來源

2011-06-11 14:50:14 Patrick

如何在輸入按鈕周圍創建邊框？

回答

相關問題