Question

嗨，我试图在ReactJS的左右边缘创建两个按钮，在它们之间添加一些文本，但是我无法弄清楚这样做所需的CSS样式。我尝试过align，float等，但似乎它们耦合在一起，所以只要一个移动，另一个移动就在其旁边。有谁知道该怎么做？

到目前为止，这是我所拥有的（尽管我喜欢100种不同的版本）：

<React.Fragment style={{float: 'left'}}><button>+</button></React.Fragment>
<React.Fragment style={{float: 'center'}}>Title</React.Fragment>
<React.Fragment style={{float: 'right'}}><button>-</button></React.Fragment>

Answer 1

实现所需目标的最简单方法是使用Css flex，如下所示：

点击Run Code snippet

const App = () => {
   return (
      <div style={{display: 'flex', justifyContent: 'space-between'}}>
        <button>+</button>
        <div>Title</div>
        <button>-</button>
      </div>)
}

ReactDOM.render(<App />, document.getElementById('root'));

<div id="root"><div/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 2

您可以使用display flex的样式CSS

<div className="wrapper">
<button>1</button>
<button>2</button>
<button>3</button
</div>

样式

.wrapper {
display: flex;
width: 100%;
align-content: space-between;
align-direction: column;
}

引用：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container

如何在同一行中创建左对齐按钮，居中对齐文本和右对齐按钮（ReactJS）

2 个答案: