css - 如何将按钮定位在完全相同的行中

Question

我创建了两个按钮。我的意图是将它们设置在与左侧按钮完全相同的行中。正如您在我的附件中看到的那样，删除按钮向上滚动了一行。任何想法如何实现我的意图？

这是黄色按钮的 CSS rlues:

.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

Answer 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;
}