如何将每两个按钮放在一行上，每行之间的边框分开？

Question

我从事 angular 8 我需要使用 html 和 css 或 bootstrap

我面临的问题是如何将每两个 buttons 放在

旁边

彼此有边框，完成第一行后

使用新按钮转到新行。

我的尝试

<input 
    hidden 
    type="file" 
/>

<button >
    Upload
</button>

<div style="width:400px;">
    <div style="float: left; width: 130px"> 
        <button
    color="primary">
    Download Template
</button>
    </div>
    <div style="float: right; width: 225px"> 
        <button
    color="primary">
    Export
</button>
    </div>
</div>

Answer 1

使用行上的 display: flex 和子行上的 width 50% 将每一行分成两列。

然后您可以为该行应用边框。

.row {
  border-bottom: 1px solid black;
  display: flex;
  padding: 10px 0;
}

.row:first-child {
  border-top: 1px solid black;
}

.row div {
  width: 50%;
}

<div class="row">
  <input type="file"/>
</div>
<div class="row">
  <div><button>Button</button></div>
  <div><button>Button</button></div>
</div>
<div class="row">
  <div><button>Button Name</button></div>
  <div><button>Button</button></div>
</div>
<div class="row">
  <div><button>Button Long Name</button></div>
  <div><button>Button</button></div>
</div>

如何将每两个按钮放在一行上，每行之间的边框分开？

How to put every two buttons on one rows with border separate between each row?

html

css

text-align

bootstrap-4

angular8