次のCSSがあります
.button {
width:0;
height:18px;
padding: 8px 0px 2px 30px;
overflow:hidden;
transition: padding .5s ease;
}
.button:hover {
padding: 8px 170px 2px 35px
}
そして私はこの単純なhtmlを持っています
<div class="button"> A text </div>
私は、1つのdiv、つまりマウスオーバーするとテキストをスムーズに表示するためにこれが右に展開される白いボックスで作成することを探しています。
そしてそれが問題です：
このような場合、パディングを幅/高さに置き換えることをお勧めしますか？または、テキストを別のdivに配置し、パディングの代わりに対応する幅と高さを使用する方がよいでしょうか。
私が私をよく説明するかどうかはわかりません
ボタンはさまざまなテキストの長さをサポートし、ボタン内のテキストに応じてパディングで幅と高さを制御できるため、通常はパディングを使用することをお勧めします。ただし、ボタンを1つのサイズと1つのサイズのみにする場合は、次のようになります。 [送信]ボタンと[ダウンロード]ボタンは2つの異なるサイズになります。これらを並べて表示する場合は、同じサイズにすることができます。この場合は、幅と高さを設定するのが理想的です。
個人的にはパディングが好きですが、すべてのボタンを同じサイズにする場合は、手動で設定してください。
ちなみに、height：18px、またはWidth：0を使用する必要はありません。これらの値を削除し、パディングを設定してこれらを制御し、ボタン内でスパンを使用するだけです。
例：
<p>Simple - One Button</p>
<div class="button"><span>A Button</span></div>
<p>3 Simple Buttons with Float Elements</p>
<div class="button floatleft"><span>A Button</span></div>
<div class="button floatleft"><span>A Button</span></div>
<div class="button floatleft"><span>A Button</span></div>
<div class="clearfix"> </div>
p {padding:15px 5px;}
.button {position:relative;transition:padding .5s ease;padding:5px;}
.button.floatleft {float:left;}
.button span:hover {padding:5px 20px 5px;}
.button span {background:#ccc;padding:5px;color:white;}
.clearfix {clear:both;}
これが私があなたに見せるために5分前に作ったものです：JsFiddle
お役に立てれば。