在反应循环中生成的按钮之间添加换行符

Question

我试图在反应循环中生成的按钮后添加一个换行符。我试过添加元素，但没有成功：

<div className="connect-container"> 
  <div>
  {connectors.map((connector) => (
    <button className="metamask-button"
      disabled={!connector.ready}
      key={connector.id}
      onClick={() => connect(connector)}
    >
      {connector.name}
      {!connector.ready && ' (unsupported)'}
      {isConnecting &&
        connector.id === pendingConnector?.id &&
        ' > > >'}
    </button> 
  )) }  
</div>

按钮之间应该有一个space。目前它们是无间距堆叠的。

Answer 1

您可以使用以下 CSS

.connect-container button {
   display: block;
   width: 100%;
   float: none;
}

使用 flex-box 的另一种简单易行的方法。

.connect-container>div{
   display: flex;
   flex-direction: column
}

代码示例

.connect-container button {
  display: block;
  width: 100%;
  float: none;
}

<div class="connect-container"> 
  <div>
 
    <button className="metamask-button" > Button 1 </button> 
    
    <button className="metamask-button" > Button 2 </button> 

</div>

示例 2：

.connect-container>div{
       display: flex;
       flex-direction: column;
    }

<div class="connect-container"> 
  <div>
 
    <button className="metamask-button" > Button 1 </button> 
    
    <button className="metamask-button" > Button 2 </button> 

</div>

Answer 2

这种方法奏效了，但只能通过添加 margin-bottom:

.connect-container button {
  display: block;
  width: 100%;
  float: none;
  margin-bottom: 10px;
}

在反应循环中生成的按钮之间添加换行符

Add line break between buttons generated in react loop

html

javascript

css

reactjs