如何防止元素因边距而换行？

Question

我试图将所有元素排成一行。我想让这个动态，所以我使用的宽度是百分比。发生的情况是一些元素正在换行。我知道这是由于边距而发生的，并且宽度不包括其计算中的边距。我能做什么？

这是我的代码：

import React, { useState, useEffect } from 'react';

const randomIntFromInterval = (min, max) => {
    return Math.floor(Math.random() * (max - min + 1) + min);
}

const Dummy2 = () => {
    const [arr, setArr] = useState([]);
    const [length, setLength] = useState(10);

    useEffect(() => {
        generateArray();
    }, [length]);

    const generateArray = () => {
        const temp = [];
        for(let i = 0; i < length; i++) {
            temp.push(randomIntFromInterval(7, 107));
        }
        setArr(temp);
    }

    const handleLength = (e) => {
        setLength(e.target.value);
    }

    const maxVal = Math.max(...arr);

    return (
        <div>
            <div className="array-container" style={{height: '50%'}}>
                {arr.map((value, idx) => (
                    <div className="array-element"
                         key={idx}
                         style={{height: `${(value * 100 / maxVal).toFixed()}%`,
                                 width: `${100 / length}%`,
                                 margin: '0 1px',
                                 display: 'inline-block',
                                 backgroundColor: 'black'}}
                    ></div>))
                }
            </div>
            <div>
                <button onClick={() => generateArray()}>New array</button>
            </div>
            <div className="slider-container">
                1
                <input type="range" 
                       min="1" 
                       max="100" 
                       onChange={(e) => handleLength(e)} 
                       className="slider" 
                       id="myRange" 
                />
                100
            </div>
            {length}
        </div>
    );
}

export default Dummy2;

Answer 1

您是否尝试过使用 calc() CSS 函数计算宽度？它允许组合 px 和百分比，因此您可以从元素的宽度中减去边距。

如何防止元素因边距而换行？

How can I prevent elements breaking to a new line because of margin?

javascript

css

reactjs

margin