我创建了两个按钮。我的目的是将它们设置为精确与左侧按钮相同的行。正如你可以看到我的附件,删除按钮向上滚动一行。任何想法如何实现我的意图?
以下是黄色按钮的CSS线索:
.button-own_I {
float:right;
display: inline-block;
text-align: center;
vertical-align: middle;
padding: 7px 6px;
border: 1px solid #a12727;
border-radius: 8px;
background: #ffff4a;
background: -webkit-gradient(linear, left top, left bottom, from(#ffff4a), to(#998f26));
background: -moz-linear-gradient(top, #ffff4a, #998f26);
background: linear-gradient(to bottom, #ffff4a, #998f26);
text-shadow: #591717 1px 1px 1px;
font: normal normal bold 11px arial;
color: #ffffff;
text-decoration: none;
margin:5px;
}
.button-own_I:hover,
.button-own_I:focus {
background: #ffff59;
background: -webkit-gradient(linear, left top, left bottom, from(#ffff59), to(#b8ac2e));
background: -moz-linear-gradient(top, #ffff59, #b8ac2e);
background: linear-gradient(to bottom, #ffff59, #b8ac2e);
color: #ffffff;
text-decoration: none;
}
.button-own_I:active {
background: #99992c;
background: -webkit-gradient(linear, left top, left bottom, from(#99992c), to(#998f26));
background: -moz-linear-gradient(top, #99992c, #998f26);
background: linear-gradient(to bottom, #99992c, #998f26);
}

以下是红色按钮的CSS规则:
.buttonDelete {
float:right;
display: inline-block;
text-align: center;
vertical-align: middle;
padding: 8px 12px;
border: 1px solid #a12727;
border-radius: 8px;
background: #ff4a4a;
background: -webkit-gradient(linear, left top, left bottom, from(#ff4a4a), to(#992727));
background: -moz-linear-gradient(top, #ff4a4a, #992727);
background: linear-gradient(to bottom, #ff4a4a, #992727);
text-shadow: #591717 1px 1px 1px;
font: normal normal bold 11px arial;
color: #ffffff;
text-decoration: none;
}
.buttonDelete:hover,
.buttonDelete:focus {
background: #ff5959;
background: -webkit-gradient(linear, left top, left bottom, from(#ff5959), to(#b62f2f));
background: -moz-linear-gradient(top, #ff5959, #b62f2f);
background: linear-gradient(to bottom, #ff5959, #b62f2f);
color: #ffffff;
text-decoration: none;
}
.buttonDelete:active {
background: #982727;
background: -webkit-gradient(linear, left top, left bottom, from(#982727), to(#982727));
background: -moz-linear-gradient(top, #982727, #982727);
background: linear-gradient(to bottom, #982727, #982727);
}

ABCDEFGHIJKLMONOPQRSTUVWXYZ
答案 0 :(得分:1)
黄色按钮末尾有边距,另一个没有。如果从黄色中删除边距,或者将边距添加到红色边缘,则问题将得到解决
这是一支显示它正常工作的笔:
https://codepen.io/anon/pen/xWWZdo
.button-own_I {
float: right;
display: inline-block;
text-align: center;
vertical-align: middle;
padding: 7px 6px;
border: 1px solid #a12727;
border-radius: 8px;
background: #ffff4a;
background: -webkit-gradient(linear, left top, left bottom, from(#ffff4a), to(#998f26));
background: -moz-linear-gradient(top, #ffff4a, #998f26);
background: linear-gradient(to bottom, #ffff4a, #998f26);
text-shadow: #591717 1px 1px 1px;
font: normal normal bold 11px arial;
color: #ffffff;
/* --- HERE -- */
text-decoration: none;
margin:5px;
}
.buttonDelete {
float:right;
display: inline-block;
text-align: center;
vertical-align: middle;
padding: 8px 12px;
border: 1px solid #a12727;
border-radius: 8px;
background: #ff4a4a;
background: -webkit-gradient(linear, left top, left bottom, from(#ff4a4a), to(#992727));
background: -moz-linear-gradient(top, #ff4a4a, #992727);
background: linear-gradient(to bottom, #ff4a4a, #992727);
text-shadow: #591717 1px 1px 1px;
font: normal normal bold 11px arial;
color: #ffffff;
/* --- AND HERE -- */
text-decoration: none;
margin:5px;
}