Как сделать горизонтальный вид без использования сетки и прогиба

Question

Я борюсь сейчас из-за создания скользящей планки.

Я хочу исправить горизонтальный вид без использования сетки и гибкости. У меня есть участки фиксированной ширины, которые будут переполнены в горизонтальном виде, но я буду скрывать часть переполнения. Когда я нажимаю кнопку, она покажет пролеты один за другим. Это мой вариант использования.

У меня есть следующие файлы:

Приложение. js:

import React from "react";
import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <div className={"spanContainer"}>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <span>6</span>
        <span>7</span>
      </div>
    </div>
  );
}

index. js:

import React from "react";
import ReactDOM from "react-dom";

import App from "./App";

const rootElement = document.getElementById("root");
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  rootElement
);

стилей. css:

.App {
  font-family: sans-serif;
  text-align: center;
  width: 400px;
  height: 400px;
  overflow: hidden;
  border: 1px solid;
}

.spanContainer {
  position: relative;
  width: 100%;
  display: -webkit-inline-box;
}

span {
  position: relative;
  width: 213px;
  height: 62px;
  display: block;
}

Вот коды и коробка моего примера кода

Я редактирую свой пример кода. Проблема в том, что я использую inline-box, но не знаю, насколько хорошо он поддерживается во всех основных браузерах, есть ли способ узнать это?

Спасибо за ответы.

Answer 1

Я изменил файл css на следующее:

.App {
  font-family: sans-serif;
  text-align: center;
  width: 400px;
  height: 400px;
  overflow: auto;
  border: 1px solid;
}

.spanContainer {
  width: calc(400px * 7);
  overflow-x: auto;
}

span {
  float:left;
  width: 400px;
  height: 62px;
}

, в результате чего 7 участков выстроились слева направо. Вы можете продолжить отсюда, чтобы добавить javascript и кнопку, чтобы делать все, что вы хотите с пролетами.