在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', 
    }, 
};