Question

我想创建一个水平菜单，其中未显示的项目可以水平滚动。目标是使它们水平滚动，所有项目都在一条水平线上。因此，我想避免第二行红色项并将它们全部放在一行中。

当前我有一条水平线，在其他线的下面，因此只有垂直滚动的可能性。如何修改我的代码以获得类似以下链接的内容？

https://www.usopen.org/index.html

var match_array = ["Med-Nadal", "Andreescu-Williams", "Cabal-Farah", "Azarenka-Barty" , "Chan-Venus", "Osioro-Yepifanova"];

for (i=0; i < match_array.length; i++){

    var match_div = document.createElement('li');
    match_div.className = "match_li";
    var textnode = document.createTextNode(match_array[i]);
    match_div.appendChild(textnode);
    document.getElementById("matches_header").appendChild(match_div);

}

ul{
    list-style: none;
    height: 100%;
}

li{
    float: left;
}

#first_band_header{
    width: 100%;
    height: 120px;
    background-color: blue;
    display: flex;
    flex-flow: row nowrap;
    flex-grow: 0;
}

#matches_header{
    flex-grow: 15;
    overflow-x: scroll;
    overflow-y: scroll;
    white-space: nowrap;
}

.first_band_button{
    height: 100%;
    width: 75px;
    flex-grow: 0;
}


.match_li{
    width: 300px;
    height: 100%;
    background-color: red;
    text-align: center;
    line-height: 100px;
    border: 1px solid black;
    display: inline-block;
}

        <div id="first_band_header">
            <button id="leftheader_button" class="first_band_button">L</button>
            <!-- populate with matches played in certain days -->
            <nav id="matches_header">
                </nav>
            <button id="rightheader_button" class="first_band_button">R</button>
        </div>

Answer 1

您可以使用此代码制作水平导航栏，并制作一个显示在网站上的工作幻灯片。基本上，您必须设置最大和最小宽度，以使元素不会缩小。除此之外，您还需要在＃matches-header元素中添加 display：flex 。

看看以下演示：

var match_array = [ "Osioro-Yepifanova",  "Osioro-Yepifanova", "Med-Nadal", "Andreescu-Williams", "Cabal-Farah", "Azarenka-Barty" , "Chan-Venus", "Osioro-Yepifanova"];

for (i=0; i < match_array.length; i++){

    var match_div = document.createElement('li');
    match_div.className = "match_li";
    var textnode = document.createTextNode(match_array[i]);
    match_div.appendChild(textnode);
    document.getElementById("matches_header").appendChild(match_div);
}


document.getElementById("leftheader_button").addEventListener("click", () =>{
  document.querySelectorAll(".match_li").forEach(e => {

    var style = window.getComputedStyle(e);
    var matrix = new WebKitCSSMatrix(style.webkitTransform);
    const actualTransformVal = matrix.m41;
    const transformNeeded = actualTransformVal - 300;
    e.style.transform =  `translateX(${transformNeeded}px)`

  });
});

document.getElementById("rightheader_button").addEventListener("click", () =>{
  document.querySelectorAll(".match_li").forEach(e => {
    var style = window.getComputedStyle(e);
    var matrix = new WebKitCSSMatrix(style.webkitTransform);
    const actualTransformVal = matrix.m41;
    const transformNeeded = actualTransformVal + 300;
    e.style.transform =  `translateX(${transformNeeded}px)`
  });
});

li{
    float: left;
}

#first_band_header{
    width: 100%;
    height: 120px;
    background-color: blue;
    display: flex;
    flex-flow: row nowrap;
    flex-grow: 0;
}

#matches_header{
    display: flex;
    overflow: hidden;
}

.first_band_button{
    height: 100%;
    width: 75px;
    flex-grow: 0;
}


.match_li{
    min-width: 300px;
    max-width: 300px;
    height: 100%;
    background-color: red;
    text-align: center;
    line-height: 100px;
    border: 1px solid black;
    display: inline-block;
    transition: all 1s ease-in-out;
}

<div id="first_band_header">
    <button id="leftheader_button" class="first_band_button">L</button>
    <!-- populate with matches played in certain days -->
    <nav id="matches_header">
        </nav>
    <button id="rightheader_button" class="first_band_button">R</button>
</div>

注意，您必须调整宽度值才能使它完美地工作。

Answer 2

水平滚动的简单示例：

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>

可滚动的导航菜单

2 个答案: