0

我所有寻找答案的搜索都失败了，所以就这样吧。我正在尝试将底部填充添加到包裹在 div 内的按钮中，并且我想将按钮向上移动到更靠近顶部的位置。但是，当添加填充时，它只会拉伸按钮的宽度和高度。抱歉，如果这真的很简单，我对编码很陌生！

.div {
background-image: url('images/banner.png');
width: 920px;   
height: 280px;
border-radius: 5px;

}

.button {
width: 226px;
height: 57px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px; /* border radius */
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box; /* prevents bg color from leaking outside the border */
background-color: #f1efea; /* layer fill content */
-moz-box-shadow: 1px 3px 5px rgba(0,0,0,.77), inset 0 2px 0 rgba(255,255,255,.31); /* drop shadow and inner shadow */
-webkit-box-shadow: 1px 3px 5px rgba(0,0,0,.77), inset 0 2px 0 rgba(255,255,255,.31); /* drop shadow and inner shadow */
box-shadow: 1px 3px 5px rgba(0,0,0,.77), inset 0 2px 0 rgba(255,255,255,.31); /* drop shadow and inner shadow */
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDIyNiA1NyIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PGxpbmVhckdyYWRpZW50IGlkPSJoYXQwIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjUwJSIgeTE9Ijk5LjUlIiB4Mj0iNTAlIiB5Mj0iMC40OTk5OTk5OTk5OTk5OSUiPgo8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZWM5NTMxIiBzdG9wLW9wYWNpdHk9IjEiLz4KPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZWZhNzU1IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgPC9saW5lYXJHcmFkaWVudD4KCjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIyMjYiIGhlaWdodD0iNTciIGZpbGw9InVybCgjaGF0MCkiIC8+Cjwvc3ZnPg==); /* gradient overlay */
background-image: -moz-linear-gradient(bottom, #ec9531 0.5%, #efa755 99.5%); /* gradient overlay */
background-image: -o-linear-gradient(bottom, #ec9531 0.5%, #efa755 99.5%); /* gradient overlay */
background-image: -webkit-linear-gradient(bottom, #ec9531 0.5%, #efa755 99.5%); /* gradient overlay */
background-image: linear-gradient(bottom, #ec9531 0.5%, #efa755 99.5%); /* gradient overlay */
4

3 回答 3

0

将此CSS添加到您各自的课程中，它将对您有所帮助。

div {
  position: relative;
}
.button {
    position: absolute;
    top: -3px;
}
于 2013-04-19T07:01:13.203 回答
0

您需要做的就是更改该元素的盒子模型。

.button {
  -moz-box-sizing: border-box; 
  -webkit-box-sizing: border-box; 
  box-sizing: border-box;
}

这可确保填充量不会添加到整体宽度或高度，并且无论填充（或边框）值如何，宽度和高度仍保持您指定的大小。

想知道更多阅读这篇文章： http: //paulirish.com/2012/box-sizing-border-box-ftw/

于 2013-04-19T05:56:28.960 回答
0

有几种方法可以做到：

.button {
    position: relative;
    top: -5px; /* will result in .button moving 5px 'up' from where it is */
}

或者您可以调整边距：

.button {
    margin-top: -5px;
}

但是请注意，调整边距会影响相对于 .button 放置的任何元素的位置，而指定 'top' 值不会。记得声明'位置：相对;' 首先如果使用这种方法。

于 2013-04-19T05:57:55.743 回答