0

定義されたサイズの2つの画像ボタンを、それらの間にスペース(マージン)なしで垂直方向に整列させたい

マージンを 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 をテスト クラスに追加します。

Herer はデモです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 に答える