html - 中心绝对值 UL's LI
问题描述
我试图将这些点集中在我的绝对 UL 上。在网上尝试了很多不同的答案后,我遇到了很多麻烦。
这是 CSS(.new-dots 是 UL):
.photos {
.new-dots {
width: 100%;
position: absolute;
top: 0;
text-align: center;
li {
display: inline;
color: rgba(202, 202, 202, 0.78);
margin-right: 5px;
button {
background: rgba(202, 202, 202, 0.75);
border-width: 0;
width: 16px;
height: 16px;
border-radius: 8px;
color: transparent;
}
button:focus {
outline: none;
}
}
.slick-active {
button {
background: #FFF !important;
}
}
}
.photo {
height: 100vw;
}
}
解决方案
- 从更改
display: inline-block;
为。li
display: inline;
默认情况下
ul
有自己的padding
andmargin
,所以你需要删除它。在您的情况下,您必须设置padding-left: 0
.此外,您还可以
width: 100%
从ul
and set 中删除left
和right
to0
以使其占据其父级的全宽。
.photos .new-dots {
position: absolute;
top: 0;
left: 0;
right: 0;
text-align: center;
padding-left: 0;
}
.photos .new-dots li {
display: inline-block;
color: rgba(202, 202, 202, 0.78);
margin-right: 5px;
}
.photos .new-dots li button {
background: rgba(202, 202, 202, 0.75);
border-width: 0;
width: 16px;
height: 16px;
border-radius: 8px;
color: transparent;
}
.photos .new-dots li button:focus {
outline: none;
}
.photos .new-dots .slick-active button {
background: #fff !important;
}
.photos .photo {
height: 100vw;
}
<div class="photos">
<ul class="new-dots">
<li><button>123</button></li>
<li><button>456</button></li>
<li><button>789</button></li>
</ul>
</div>
工作笔在这里
推荐阅读
- node.js - 如何更改代码以从数据库中删除所有记录而不是一个?
- sql - 当列名与动态传递的变量匹配时,如何获取列的值(对于特定行)?
- javascript - 抓取elementID
- sql - Spark.sql 在没有任何优化的情况下运行查询(aws 胶水雅典娜)
- python - 如何从另一个数据框中提取具有相同 ID 的行的数据?
- python - 从python中的另一个程序(菜单)调用程序(表单)
- swift - 在 Swift 中使用 selectedIndexSet 从 Cocoa NSOutlineView 获取多个项目
- c# - Windows 窗体 - 从另一个窗体中创建一个窗体中的按钮
- spring-boot - JHipster - 没有可用的“org.springframework.boot.web.embedded.undertow.UndertowServletWebServerFactory”类型的合格 bean
- python - 将 Oracle Instant 客户端安装到 Python cx_Oracle 的 Docker 容器中