5

我有下一个 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中并使用相应的宽度和高度而不是填充更好？

我不知道我是否解释清楚

4

1 回答 1

5

通常最好使用填充，因为按钮将支持不同的文本长度，并让填充根据按钮内的文本控制宽度和高度，但是，如果您希望按钮为一种尺寸且仅一种尺寸，例如：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

希望这可以帮助。

于 2012-12-23T20:34:26.353 回答