<button> 里面没有文字显得更高

Question

我正在尝试在按钮中制作一个微调器，以指示正在加载操作。问题是，如果一个按钮中没有文本，它会显示得比其他按钮高，我希望它们对齐。

这是HTML:

<div>
<button class='buttonclass'>aaa</button>
<button class='buttonclass'>
<span class="loader"></span>
</button>
<button class='buttonclass'>bbb</button>
</div>

和CSS:

.buttonclass {
height: 40px;
width: 40px;
}
.loader {
display: inline-block;
border: 3px solid #f3f3f3; /* Light grey */
border-top: 3px solid #3498db; /* Blue */
border-radius: 50%;
width: 20px;
height: 20px;
animation: spin 0.75s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
25% { transform: rotate(45deg); }
75% { transform: rotate(315deg); }
100% { transform: rotate(360deg); }
}

这就是的结果

在此处输入图像描述

我希望所有3个按钮都对齐，有可能吗？感谢

Answer 1

您可以在第一个div上使用flex，如下所示：

.buttonclass {
height: 40px;
width: 40px;
}
.loader {
display: inline-block;
border: 3px solid #f3f3f3; /* Light grey */
border-top: 3px solid #3498db; /* Blue */
border-radius: 50%;
width: 20px;
height: 20px;
animation: spin 0.75s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
25% { transform: rotate(45deg); }
75% { transform: rotate(315deg); }
100% { transform: rotate(360deg); }
}
.first{ display:flex; }

<div class="first">
<button class='buttonclass'>aaa</button>
<button class='buttonclass'>
<span class="loader"></span>
</button>
<button class='buttonclass'>bbb</button>
</div>

Answer 2

CSS Flexbox可以帮助您。我的方法与评论代码：

div {
width: 200px; /*just for the example*/
display: flex;
flex-flow: row nowrap;
align-items: center;/*vertical alignment*/
justify-content: space-between;/* spacing / horizontal alignment*/
}
.buttonclass {
height: 40px;
width: 40px;
}
.loader {
display: inline-block;
border: 3px solid #f3f3f3; /* Light grey */
border-top: 3px solid #3498db; /* Blue */
border-radius: 50%;
width: 20px;
height: 20px;
animation: spin 0.75s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
25% { transform: rotate(45deg); }
75% { transform: rotate(315deg); }
100% { transform: rotate(360deg); }
}

<div>
<button class='buttonclass'>aaa</button>
<button class='buttonclass'>
<span class="loader"></span>
</button>
<button class='buttonclass'>bbb</button>
</div>

Answer 3

这里有一个示例

let btn = document.querySelector("button");
btn.addEventListener("click", () => {
let loader = document.querySelector(".loader");
btn.classList.add("disabled");
loader.style.display = "block";
})

.buttonclass {
min-height: 40px;
min-width: 40px;
display: flex;
align-items: center;
transition: 300ms;
border: 1px solid lightgrey;
outline: none;
cursor: pointer;
}
.loader {
margin-left: 10px;
display: none;
border: 2px solid #f3f3f3; /* Light grey */
border-top: 2px solid #3498db; /* Blue */
border-radius: 50%;
width: 15px;
height: 15px;
animation: spin 0.45s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
25% { transform: rotate(45deg); }
75% { transform: rotate(315deg); }
100% { transform: rotate(360deg); }
}
.disabled {
background: lightgrey;
color: white;
border: 1px solid lightgrey;
pointer-events: none;
outline: none;
color: grey;
}

<button class="buttonclass">Click me<div class="loader"></div></button>