0

我想垂直对齐两个定义大小的图像按钮，它们之间没有任何空格（边距）

我试图将边距设置为 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>我想要的

4

3 回答 3

3

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

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

于 2012-08-30T07:42:39.393 回答
2

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

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

这里是演示http://jsfiddle.net/8yyrr/

于 2012-08-30T07:44:34.880 回答
-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-30T07:41:48.000 回答