如何定位一组在文本大小更改时不会移动的按钮？

Question

我坚持要使这些按钮的位置绝对化，这样当计数器文本不会弄乱按钮的位置时。这是我正在谈论的源代码和图像：

render() {
    let classes = this.getBadgeClasses();
    return (
        <React.Fragment>
            <div>
                <span
                    style={this.styles}
                    className={classes}
                >
                    {this.formatCount()}

                </span>
                <button
                    onClick={() => this.props.onIncrement(this.props.counter)}
                    className="btn btn-secondary btn-sm m-2"
                >
                    +
                </button>
                <button
                    onClick={() => this.props.onDecrement(this.props.counter)}
                    className="btn btn-secondary btn-sm m-2"
                >
                    -
                </button>
                <button
                    onClick={() => this.props.onDelete(this.props.counter.id)}
                    className="btn btn-danger btn-sm m-2"
                >
                    x
                </button>
            </div>
            <div>
                {this.state.tags.length === 0 && 'Please create a new tag!'}
            </div>
        </React.Fragment>
    );
}

Answer 1

你必须给 span 元素一个特定的宽度

如何定位一组在文本大小更改时不会移动的按钮？

How do you position a set of buttons that don't move when text size changes?

html

css

position

button

reactjs