Add line break between buttons generated in react loop-CodePudding

I a trying to add a line break after a button that is generated in a react loop. I've tried adding elements but that has not worked:

<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>

There should be a space between the buttons. Currently they are stacked without spacing.

CodePudding user response：

You can do this by using following CSS

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

Another simple & easy way using flex-box.

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

Code example

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

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

</div>

Example 2:

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

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

</div>

CodePudding user response：

This approach worked, but only by adding margin-bottom:

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