web前端设置两端对齐

夏翊呀

已于 2022-10-22 22:48:44 修改

阅读量831

点赞数 1

文章标签：前端 javascript html

于 2022-10-22 22:48:00 首次发布

本文链接：https://blog.csdn.net/qq_54508046/article/details/127468805

版权

设置两端对齐的代码为：

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>