javascript - 没有 sibling 时不考虑跨度填充，但在有 sibling 时保留

Question

我有一个 div，里面有一个 span 和一个按钮。我可以切换按钮以隐藏或显示它。

当我切换按钮时，它会使跨度跳跃，如下所示:

const {
  Button,
} = window['material-ui'];

class ButtonContainer extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        hide: false
      }
    }
    handleHide() {
      this.setState(previous => ({
        hide: !previous.hide
      }))
    }
    render() {
        return ( 
            <div style={{"minHeight":"1000px", "padding":"0.05px", "display":"inline-block"}}>
                <Button style={{"background":"lightblue", "padding":"10px"}} onClick = {this.handleHide.bind(this)}>{this.state.hide?'show':'hide'} button</Button>
                <div>
                    <span style={{"background":"red", "padding":"10px"}}> jump </span>
                    {!this.state.hide && <Button style={{"background":"orange"}}> padding </Button>}
               </div>
            </div>)
    }
}


ReactDOM.render(<ButtonContainer/>, document.querySelector("#root"))

<script src="https://unpkg.com/react@latest/umd/react.development.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/react-dom@latest/umd/react-dom.development.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/@material-ui/core/umd/material-ui.development.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/babel-standalone@latest/babel.min.js" crossorigin="anonymous"></script>

<div id="root"></div>

我尝试了很多不同的东西，其中一些来自 here ，包括向父级添加 display: inline-block 以及 padding: 0.05px 但它似乎没有达到预期的效果。

如何在切换按钮时防止这种跳跃？

Answer 1

由于 span 是一个内联元素，它没有自己的宽度和高度。要停止此行为，您可以将 display: inline-block 添加到您的 span。它会起作用。

const {
  Button,
} = window['material-ui'];

class ButtonContainer extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        hide: false
      }
    }
    handleHide() {
      this.setState(previous => ({
        hide: !previous.hide
      }))
    }
    render() {
        return ( 
            <div style={{"minHeight":"1000px", "padding":"0.05px", "display":"inline-block"}}>
                <Button style={{"background":"lightblue", "padding":"10px"}} onClick = {this.handleHide.bind(this)}>{this.state.hide?'show':'hide'} button</Button>
                <div>
                    <span style={{"background":"red", "padding":"10px", "display":"inline-block"}}> jump </span>
                    {!this.state.hide && <Button style={{"background":"orange"}}> padding </Button>}
               </div>
            </div>)
    }
}


ReactDOM.render(<ButtonContainer/>, document.querySelector("#root"))

<script src="https://unpkg.com/react@latest/umd/react.development.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/react-dom@latest/umd/react-dom.development.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/@material-ui/core/umd/material-ui.development.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/babel-standalone@latest/babel.min.js" crossorigin="anonymous"></script>

<div id="root"></div>