如何使按钮高度相同？

Question

如何使两个并排的按钮具有相同的高度？

从图像中可以看到，按钮的高度不同。

<div class="register-btn"><span class="register"><a href="http://#" target="_blank">Register Now</a></span><a href="http://#" target="_blank"><i class="fa fa-long-arrow-right arrow-right"></i></a></div>

    .register-btn {
    margin-top: 125px;
    background-color: #23342c;
    float: right;
}

.register {
    padding: 1rem;
    background-color: #2d4137;
    color: #fff;
}

.arrow-right {
    padding: 1rem;
    background-color: #23342c;
    color: #fff;
}

Answer 1

1. 您可以在按钮的容器中添加display: inline-flex;（在本例中为register-btn。）

.register-btn {
    margin-top: 125px;
    background-color: #23342c;
    float: right;
    display: inline-flex;
}

.register {
    padding: 1rem;
    background-color: #2d4137;
    color: #fff;
}

.arrow-right {
    padding: 1rem;
    background-color: #23342c;
    color: #fff;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>
<div class="register-btn"><span class="register"><a href="http://#" target="_blank">Register Now</a></span><a href="http://#" target="_blank"><i class="fa fa-long-arrow-right arrow-right"></i></a></div>

1. 您可以将类别button添加到要排队的按钮上。并添加到您的CSS

.register-btn {
    margin-top: 125px;
    background-color: #23342c;
    float: right;
}

.register {
    padding: 1rem;
    background-color: #2d4137;
    color: #fff;
}

.arrow-right {
    padding: 1rem;
    background-color: #23342c;
    color: #fff;
}
.button {
  height: 50px; /* 50px just an example. You can change it by your own */
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>
<div class="button register-btn"><span class="register"><a href="http://#" target="_blank">Register Now</a></span><a href="http://#" class="button" target="_blank"><i class="fa fa-long-arrow-right arrow-right"></i></a></div>

Answer 2

您可以使用flexbox CSS：

.register-btn {
    /* margin-top: 125px; */
    background-color: #23342c;
    /* float: right; */
    display: inline-flex;
}