没有兄弟姐妹时不考虑跨度填充，但是有兄弟姐妹时保持跨度

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>