我有下一个 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>
我正在寻找仅在一个 div 中创建，如果您将鼠标悬停在一个白框上，它会向右展开以平滑地显示文本。
这就是问题所在：
在这些情况下，一个好的做法是用宽度/高度替换填充吗？还是将文本放在不同的div中并使用相应的宽度和高度而不是填充更好？
我不知道我是否解释清楚
通常最好使用填充，因为按钮将支持不同的文本长度，并让填充根据按钮内的文本控制宽度和高度，但是，如果您希望按钮为一种尺寸且仅一种尺寸，例如：A带有提交的按钮和带有下载的按钮将有 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
希望这可以帮助。