html - 可滚动区域中的中心元素
问题描述
如何在可滚动的水平 flex 容器中居中对齐第一个和最后一个 flex 项?
让滚动工作很容易。
我的容器有:
scroll-snap-type: x mandatory;
overflow-x: scroll;
和项目有:
scroll-snap-align: center;
滚动有效,但是列表中最左边和最右边的项目总是分别左右对齐。
我想让第一个和最后一个项目能够在可滚动元素列表中居中。
如果我们看这个例子,“home”选项卡是最左边的项目。我想把它放在可滚动区域的中心。
我需要在可滚动区域的左侧和右侧有空白标签吗?
感谢您的任何建议。
div.scrollmenu {
background-color: #333;
overflow: auto;
white-space: nowrap;
}
div.scrollmenu a {
display: inline-block;
color: white;
text-align: center;
padding: 14px;
text-decoration: none;
}
div.scrollmenu a:hover {
background-color: #777;
}
<div class="scrollmenu">
<a href="#home">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
<a href="#about">About</a>
<a href="#support">Support</a>
<a href="#blog">Blog</a>
<a href="#tools">Tools</a>
<a href="#base">Base</a>
<a href="#custom">Custom</a>
<a href="#more">More</a>
<a href="#logo">Logo</a>
<a href="#friends">Friends</a>
<a href="#partners">Partners</a>
<a href="#people">People</a>
<a href="#work">Work</a>
</div>
解决方案
我需要在可滚动区域的左侧和右侧有空白标签吗?
这不是一个坏主意。
你可以在两端创建一堆“假”元素,然后给它们visibility: hidden
.
div.scrollmenu {
background-color: #333;
overflow: auto;
white-space: nowrap;
}
div.scrollmenu a {
display: inline-block;
color: white;
text-align: center;
padding: 14px;
text-decoration: none;
}
div.scrollmenu a:hover {
background-color: #777;
}
/* NEW */
a:nth-child(-n + 5),
a:nth-last-child(-n + 5) {
background-color: green;
visibility: hidden;
<div class="scrollmenu">
<a href="#home">Home</a>
<a href="#home">Home</a>
<a href="#home">Home</a>
<a href="#home">Home</a>
<a href="#home">Home</a>
<a href="#home">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
<a href="#about">About</a>
<a href="#support">Support</a>
<a href="#blog">Blog</a>
<a href="#tools">Tools</a>
<a href="#base">Base</a>
<a href="#custom">Custom</a>
<a href="#more">More</a>
<a href="#logo">Logo</a>
<a href="#friends">Friends</a>
<a href="#partners">Partners</a>
<a href="#people">People</a>
<a href="#work">Work</a>
<a href="#home">Home</a>
<a href="#home">Home</a>
<a href="#home">Home</a>
<a href="#home">Home</a>
<a href="#home">Home</a>
<a href="#home">Home</a>
</div>
但是,有一个更简单且语义更有价值的解决方案:使用 CSS 伪元素。
由于您只关注布局的外观,因此不应篡改 HTML。你应该坚持使用纯 CSS。
由于flex 容器上的伪元素被视为 flex items,因此您可以使用::before
(自然流中的第一项) 和::after
(自然流中的最后一项) 来创建所需的居中效果。
div.scrollmenu {
background-color: #333;
overflow: auto;
white-space: nowrap;
display: flex;
}
div.scrollmenu a {
color: white;
text-align: center;
padding: 14px;
text-decoration: none;
}
div.scrollmenu a:hover {
background-color: #777;
}
/* NEW */
.scrollmenu::before,
.scrollmenu::after {
content: "";
flex: 0 0 50%;
}
<div class="scrollmenu">
<a href="#home">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
<a href="#about">About</a>
<a href="#support">Support</a>
<a href="#blog">Blog</a>
<a href="#tools">Tools</a>
<a href="#base">Base</a>
<a href="#custom">Custom</a>
<a href="#more">More</a>
<a href="#logo">Logo</a>
<a href="#friends">Friends</a>
<a href="#partners">Partners</a>
<a href="#people">People</a>
<a href="#work">Work</a>
</div>
推荐阅读
- html - 如何从角度组件显示包含内联样式标签的字符串 HTML
- r - R:将最大的 5 行保留在一个表中
- flask - Flask-Restx:从 Swagger 设置默认路由?
- asp.net - 西班牙语字符在服务器 ASP.NET 生产服务器上无法正确显示,但在我的开发盒上正常
- javascript - 无法通过前端 Javascript 中的 web3.js 调用智能合约函数
- python - 使用python获取对应于每一行的数组元素的值计数
- python - 将一组日期时间对象添加到 2D 数组中,以创建一个带有时间戳的数组
- javascript - 从单击的按钮中获取值显示它
- android - Android 中的 SQL 注入
- .net - WCF System.TypeLoadException:访问被拒绝: