1

タグspan内に含まれるものの配置に問題があります。button

私はすでにこのようなことをしたことがあり、それはうまくいきました。実際、これは同じcssですが、サイズが異なります。

問題は、包含spanが右に整列しているように見えることです。

ここに画像の説明を入力してください

CSS：

#closePreviewBtn {
    position: absolute;
    height: 24px;
    width: 24px;
    right: 0;
    background: #B9DEFD;
    border-top: solid 1px #333333;
    border-left: solid 1px#333333;
    border-right: solid 1px #333333;
    border-bottom: solid 1px #333333;
    border-radius: 4px;
}

#closePreviewBtn .close {
    display: inline-block;
    position: relative;
    height: 20px;
    width: 20px;
    background: url(../imagenes/close.png) no-repeat center;
    padding: 0;
    /*right: 2px; 
    bottom: 1px;*/ //This fixes the problem but it's manual
}

HTML：

<html>
<body>
<button id="closePreviewBtn" name="closePreviewBtn"><span class="close"></span></button>
</body>
</html>

どうもありがとう！

4

3 に答える 3

3

簡単な修正-ボタンにはデフォルトでパディングがあるようです。0に設定するだけです。

#closePreviewBtn {
  padding: 0;
}

これで、好きなように配置できます。スパンを移動したい場合は、スパンにマージンを追加することもできます。

それがあなたを助けることを願っています、

于 2012-09-12T18:32:20.867 に答える
0

ボタンのサイズを10pxに変更した後も、ボタンにパディングが残っていることに気付きました。そのスペースを引き立たせる方法が見つかりませんでした。

中央に配置するために私が見つけた解決策は、ボタンの高さと幅を削除することでした。これは、ボタンが拡張して折り返され、中央に配置されるためspanです。

奇妙なことに、それは小さなボタンで機能します。ただし、30px x 50pxのような大きなボタンの場合は、高さと幅を設定するだけで問題ありません。少なくとも、パディングがある場合は、パディングに気付くのは非常に困難です。

于 2012-09-12T19:26:25.020 に答える
0

#closePreviewBtnルールで、を削除しますright:0;。位置を絶対値に設定し、右をゼロに設定すると、要素がドキュメントフローから削除され、可能な限り右に配置されます。

jsFiddleの例

于 2012-09-12T18:36:32.927 に答える