How to position buttons in exactly same line - css

Question

I created two buttons. My intention is to set them in exact same line as buttons at the left side. As U can see at my attachement, delete button is scrolled up one line. Any ideas how to achieve my intention?
Here are CSS rlues for yellow button:
.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);
}
Here are CSS rules for red button:
.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

The yellow button has a margin at the end, the other don't. If you remove the margin from the yellow, or add margin to the red one your problem will be solved
Here's a pen showing it working:
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;
}