無空白

欲對齊兩個圖像的按鈕具有限定大小對齊按鈕垂直它們之間沒有任何空間（餘量）無空白

我試圖餘量設置爲0，但空間保持

<html> 
    <head> 
    <title>Test</title> 

    <style> 
     .test { 
     width:0.8em; 
     height:0.5em; 
     margin:0px; 
     border:1px solid black; 
     background-repeat:no-repeat; 
     background-position:center; 
     visibility:visible; 
     } 
    </style> 
    </head> 

    <body> 
    <form> 
     <div style="border:1px solid black; display:inline-block;"> 
     <input class="test" style="background-image:url(arrow_up.png)" type="button" value="^"> 
     <br> 
     <input class="test" style="background-image:url(arrow_down.png)" type="button" value="v"> 
     </div> 
    </form> 
    </body> 
</html>

它看起來像這一點，但看起來應該是這樣

+-+    +-+ 
    |^|    |^| 
    | |  =>  |v| 
    |v|    +-+ 
    | | 
    +-+

你有什麼想法，我需要設置哪個屬性來擺脫邊距？

EDIT（回答）：好這樣的display:block;組合和拆卸<br>做什麼，我想感謝大家

來源

2012-08-30 Hachi

儘量讓他們（輸入）塊元素，在默認情況下它們是內聯元素，並可以提供一些空間。

演示：http://jsfiddle.net/2YNTk/1/，http://jsfiddle.net/2YNTk/2/（與br標籤）

來源

2012-08-30 07:42:39

-1

我要說的是，你將按鈕放在表內，並更改表的間距。然後，您可以對齊按鈕而不使用邊距。

<table cellspacing="30"> 
    <tr> 
    <td> 
     <input class="test" style="background-image:url(arrow_up.png)" type="button" value="^"> 
    </td> 
    </tr> 
    <tr> 
    <td> 
     <input class="test" style="background-image:url(arrow_down.png)" type="button" value="v"> 
     </div> 
    </td> 
    </tr> 
</table>

，會給你垂直對齊

來源

2012-08-30 07:41:48 debal

僅當按鈕代表表格數據。考慮到按鈕不是表格數據而是交互式設備，我不會建議這樣做。 – Kyle

是啊，桌子總是不錯但不贊成的佈局。我試圖在沒有表格的情況下工作，但是感謝那個提示 – Hachi

從你的HTML代碼，第一個輸入標籤後有刪除<br>。

刪除br並添加display：block來測試類。

Herer是演示http://jsfiddle.net/8yyrr/

來源

2012-08-30 07:44:34 Sowmya

''br''需要對齊它們。我可以爲周圍的div設置一個大小來對齊它們，但是這會導致相同的間距 – Hachi

檢查編輯後的答案和演示 – Sowmya

回答

相關問題