javascript - 如何在html中使用滚动条动态分配按钮？

Question

我使用 html、javascript、jquery 制作网页。我想为标签栏使用水平滚动条。我将在标签栏中放置一个动态分配按钮。当创建了很多按钮时，按钮是在下划线中创建的，所以我不能使用滚动。

我想在该行的水平 ScrollView 上创建按钮。我将使用 scrollLeft 方法来箭头按钮。

问题是什么？

1. 显示样式更改为内联 block 。
2. overflow-x:自动 -> 滚动。但它不是固定的。

在我使用 flex block 之后。但它并没有按照我想要的方式进行。我不想使用 flex 布局的一部分。

<script>
// .js
function push_btn(){
    var addedTabDiv = document.getElementById("scroll_view_tabbar");
    var tab_code = "";
    tab_code += "<input type='button' id='tab_btn' class='tab_btn' value='tab_btn' />";
    tab_code += "<input type='button' id='tab_btn_x' class='tab_btn_x' value='X' />";
    var addedTab = document.createElement("div");
    addedTab.id = "scroll_view_btn_div";
    addedTab.className = "scroll_view_btn_div";
    addedTab.innerHTML  = tab_code;
    addedTabDiv.appendChild(addedTab);
}
</script>

<style>
/* .css */
::-webkit-scrollbar {
  display:none;
}

.scroll_view_tabbar{
    width:800px;
    height:30px;
    dlsplay:inline-block;
    float:left;
    overflow-y:hidden;
    overflow-x:scroll; /* or auto; */
}
.scroll_view_btn_div{
    width:100px;
    height:30px;
    dlsplay:inline-block;
    float:left;
}
.tab_btn{
    width:70px;
    height:30px;
    dlsplay:inline-block;
    float:left;
}
.tab_btn_x{
    width:30px;
    height:30px;
    dlsplay:inline-block;
    float:right;
}


.tabbar_arrow_left{
    width : 30px;
    height: 30px;
    display:none;
    float : left;
}

.tabbar_arrow_right{
    width : 30px;
    height: 30px;
    display:none;
    float : right;
}
</style>

<!-- html -->
<button onclick="push_btn()">Add</button>
<div id="scroll_view_tabbar" class="scroll_view_tabbar"></div>

如果使用 push_btn() 并创建了许多按钮，则在下划线中创建按钮。

Answer 1

我想使用“white-space:nowrap”。它不适用。因此创建的按钮位于下方。我找到了。

“white-space:nowrap”被阻塞“float:left”

感谢您的关注。对不起。

enter image description here想要它。

enter image description here阻止了“空白:nowrap”。这是我的问题。