css 如何将一个按钮置于底部

CSS 如何将一个按钮置于底部？

.btn{
       position: absolute;
       bottom: 0;
       left: 50%;
       transform: translateX(-50%);
}
    

上述 CSS 代码解析：

1. 使用绝对定位 position: absolute;

2. 底部距离为 0 bottom: 0;

3. 水平居中 left: 50%; 和 transform: translateX(-50%);

制作了一个简单的示例，通过修改按钮的位置来验证 CSS 效果：

!DOCTYPE html>
    html>
    head>
    	meta charset="UTF-8">
    	title>
    按钮置于底部/title>
    	style type="text/css">
body{
    	margin: 0;
    	padding: 0;
}
.container{
    	width: 100%;
    	height: 500px;
    	background: #DDD;
    	position: relative;
}
.btn{
       position: absolute;
       bottom: 0;
       left: 50%;
       transform: translateX(-50%);
       width: 100px;
       height: 50px;
       background: #F00;
       color: #FFF;
       text-align: center;
       line-height: 50px;
       cursor: pointer;
}
    	/style>
    /head>
    body>
    	div class="container">
    div class="btn">
    按钮/div>
    	/div>
    /body>
    /html>
    

点击 这里 查看实例效果。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！