设置两端对齐的代码为:
display: flex;
justify-content: space-between;
没有设置两端对齐生成的三个button的效果为:
代码为:
<style>
div button {
background-color: antiquewhite;
border-radius: 5px;
}
button:hover {
background-color: aquamarine;
}
</style>
<div>
<button>button1</button>
<button>button2</button>
<button>button3</button>
</div>
设置两端对齐后,生成的button布局效果为:
代码为:
<style>
div {
display: flex;
justify-content: space-between;
background-color: aquamarine;
}
div button {
background-color: antiquewhite;
border-radius: 5px;
}
button:hover {
background-color: aquamarine;
}
</style>