Как использовать полосу прокрутки для динамического выделения кнопки в HTML?

Question

Я делаю веб-страницу с использованием HTML, JavaScript, JQuery. Я хочу использовать горизонтальную полосу прокрутки для вкладки. Я помещу кнопку динамического выделения в панель вкладок. Когда создается много кнопок, кнопки создаются в подчеркивании, поэтому я не могу использовать прокрутку.

Я хочу создать кнопку на горизонтальной прокрутке в строке. и я буду использовать метод scrollLeft для кнопки со стрелкой.

В чем проблема?

1. изменение стиля отображения на встроенный блок.
2. overflow-x: auto -> Прокрутка. но это не было исправлено.

после того, как я использовал flex block. но это не сработало так, как я хотел. Я не хочу использовать часть гибкого макета.

<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». Это не относится. Таким образом, созданная кнопка находится в положении под. Я нашел его.

"пробел: nowrap" заблокирован "float: left"

Спасибо за проявленный интерес. извините.

введите описание изображения здесь хотите его.

введите описание изображения здесь заблокирован "пробел: сейчас". Это была моя проблема.