Question

我希望垂直对齐两个图像按钮，没有任何空格（边距）

我尝试将边距设置为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|              +-+
    | |
    +-+

你有什么想法，我需要设置哪个属性来摆脱边际？

编辑（回答）：好吧所以display:block;和删除<br>的组合做了我想要的事，感谢大家

Answer 1

尝试制作（输入）块元素，默认情况下它们是内联元素，可能会提供一些空格。

演示：http://jsfiddle.net/2YNTk/1/，http://jsfiddle.net/2YNTk/2/（带br代码）

Answer 2

从第一个输入标记后面的html代码中删除<br>。

删除br并将display：block添加到测试类。

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

Answer 3

我会说你把按钮放在一张桌子里并改变桌子的间距。然后，您可以在不使用边距的情况下对齐按钮。

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

会给你垂直对齐

对齐没有边距的按钮

3 个答案: