在React中对父项内的项目进行故障排除

Question

我在对齐React中另一个div内的两个组件时遇到问题。我使用相对定位的父div（snippetButtonHolder）和绝对定位为其子（片段和按钮）。我希望代码片段集中在父代和按钮的下方，并且在右侧，但由于某些原因，当我使用这些属性时，它们相对于整个页面而不是父div。有没有人有建议，我应该做什么不同？

const styles = { 
    module: { 
     marginTop: '30px', 
     padding: '20px', 
    }, 
    snippet: { 
     backgroundColor: '#f2f2f2', 
     border: 'solid 1px #ccc', 
     borderRadius: '4px', 
     margin: '0 auto', 
     padding: '10px', 
     width: '100%', 
     position: 'absolute', 
     left: '50%', 
    }, 
    snippetButtonHolder: { 
     width: '95%', 
     position: 'relative', 
    }, 
    button: { 
     float: 'right', 
     marginTop: '5px', 
     position: 'absolute', 
     left: '94%', 

    }, 
}; 

export default class CodeSnippet extends Component { 
    constructor(props) { 
     super(props); 
    } 


    render() { 
     return (
      <div style={styles.module}> 
       <div style={styles.snippetButtonHolder}> 
        <div style={styles.snippet}> 
         <div 
          {'text will go here'} 
         </div> 
         {this.state.showButton ? 
          <button 
           style={styles.button}> 
           Press me 
          </button> 
         : null} 
        </div> 
       </div> 
      </div> 
     ); 
    } 
} 

Answer 1

这给一试：

const styles = { 
    module: { 
     marginTop: '30px', 
     padding: '20px', 
    }, 
    snippet: { 
     backgroundColor: '#f2f2f2', 
     border: 'solid 1px #ccc', 
     borderRadius: '4px', 
     display: 'inline-block', 
     overflow: 'hidden', 
     padding: '10px', 
    }, 
    snippetButtonHolder: { 
     textAlign: 'center', 
     width: '95%', 
    }, 
    button: { 
     float: 'right', 
     marginTop: '5px', 
    }, 
};