我正在尝试像 youtube 导航一样制作滚动导航
我想让 scroll-horizontal div 获得内联 block 元素的宽度，即 <li>
我想以某种方式使 scroll-horizontal div 自动获得当前宽度，即使我添加了更多 <li>稍后导航的元素
<body>
<nav>
<div class="scroll-horizontal">
<li class=" menu-item"><a class="active" href="">Home</a></li>
<li class=" menu-item"><a href="">Models</a></li>
<li class="menu-item"><a href="">Photos</a></li>
<li class="menu-item"><a href="">Videos</a></li>
<li class="menu-item"><a href="">Youtube</a></li>
<li class="menu-item"><a href="">Links</a></li>
</div>
</nav>
<style type="text/css">
*{
margin: 0;
padding: 0
}
/*NAV*/
nav{
width: 100% !important;
background: red;
overflow: auto;
}
.scroll-horizontal{
min-width: 300%;
}
nav li{
list-style: none;
display: inline-block;
}
nav a{
text-align: center;
text-decoration: none;
color: #444;
display: block;
padding: 0 20px;
width: 100px;
}
</style>
</body>youtube 的导航: youtube nav
你可以看到他们的导航不像我的那样在导航末尾有空白
最佳答案
这可能会部分回答您的问题:
据我了解，youtube 上的选项卡菜单会显示水平滚动箭头，具体取决于窗口宽度。所以我会使用 css '@media' 规则来指定宽度，当箭头应该显示时。这是一个解决方案，当窗口太窄而无法显示完整菜单时，它会同时显示左箭头和右箭头:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
*{
margin: 0;
padding: 0;
}
body {
font-family: Arial;
background-color: #eee;
}
div.scrollmenu {
padding: 0 38px 0 38px;
overflow: hidden;
white-space: nowrap;
background-color: #fff;
}
div.scrollmenu a {
display: inline-block;
color: #000;
text-align: center;
padding: 14px;
text-decoration: none;
background-color: #fff;
}
div.scrollmenu a:hover {
background-color: #aaa;
}
#btn-scroll-lft {
position: absolute;
top: 0;
left: 0;
background-color: #fff;
padding: 15px;
border: 0px;
height: 46px;
font-weight: bold;
display: none;
}
#btn-scroll-rgt {
position: absolute;
top: 0;
right: 0;
background-color: #fff;
padding: 15px;
border: 0px;
height: 46px;
font-weight: bold;
display: none;
}
@media only screen and (max-width: 600px) {
#btn-scroll-lft {
display: block;
}
#btn-scroll-rgt {
display: block;
}
}
</style>
</head>
<body>
<button id="btn-scroll-lft" onclick="scrollWinLeft()"><</button>
<div class="scrollmenu" id="scrollmenu">
<a href="#">one</a>
<a href="#">two</a>
<a href="#">three</a>
<a href="#">four</a>
<a href="#">five</a>
<a href="#">six</a>
<a href="#">seven</a>
<a href="#">eight</a>
<a href="#">nine</a>
</div>
<button id="btn-scroll-rgt" onclick="scrollWinRight()">></button>
<script>
function scrollWinLeft() {
document.getElementById('scrollmenu').scrollBy(-100,0);
}
function scrollWinRight() {
document.getElementById('scrollmenu').scrollBy(100, 0);
}
</script>
</body>
</html>关于html - 如何使水平滚动获得默认的div宽度？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58647288/