老师说下下边这个浮动 最右边的20px给取了 但他没做 请问改怎么取呢
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>绝对定位的用途</title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
.carousel {
position: relative;
width: 396px;
height: 396px;
border: 1px solid #000;
margin: 40px auto;
}
.carousel .btn {
position: absolute;
width: 38px;
height: 38px;
border: 1px solid #000;
top: 50%;
margin-top: -19px;
/* 圆形 */
border-radius: 50%;
text-align: center;
/* 居中 行高等于盒子高 */
line-height: 38px;
background-color: rgba(255, 255 , 255, .5);
/* 鼠标小手 */
cursor: pointer;
font-family: consolas;
font-size: 26px;
}
.carousel .btn:hover{
background-color: gold;
color: white;
}
.carousel .leftbtn {
left: 10px;
}
.carousel .rightbtn {
right: 10px;
}
.carousel ol{
position: absolute;
width: 120px;
height: 20px;
right: 20px;
bottom: 20px;
list-style: none;
}
.carousel ol li {
float: left;
width: 20px;
height: 20px;
background-color:rgba(255, 255, 255, 0.5);
border-radius: 50px;
margin-right: 10px;
}
.carousel ol li.current {
background-color: gold;
}
</style>
<body>
<div class="carousel">
<img src="../../作业/images/b4.jpg" />
<a class="leftbtn btn"><</a>
<a class="rightbtn btn">></a>
<ol>
<li></li>
<li></li>
<li class="current"></li>
<li></li>
</ol>
</div>
</body>
</html>
正在回答
同学你好，问题解答如下：
1、删掉最后一个圆点后面的10px间距，参照老师第一条回复设置即可。
2、但如果同学把ol的120px改为100px，最后一个圆点放不下肯定会被挤下去的。每一个圆点宽度为20px，4个圆点总宽度为80px，每一个圆点右侧间距为10px，除去最后一个圆点的间距，那么前三个圆点的总间距为30px ，所以父元素要设置宽度为110px，才可以放下所有圆点。
如下图所示：
效果如下：
祝学习愉快~
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星