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

发布于 2025-01-17 11:07:17 字数 691 浏览 5 评论 0原文

我在 Angular 8 上工作，我需要使用它来进行网页设计 html 和 css 或 bootstrap

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

一起并带有边框，并在完成第一行后

转到带有新按钮的新行。

我尝试什么

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

原文

I work on angular 8 I need to make web page design using
html and css or bootstrap

my issue i face how to put every two buttons beside

each other with border and after finish first row

go to new row with new buttons .

what i try

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

左岸枫 2025-01-24 11:07:17

使用显示：在行上的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>

Split each row into two columns using display: flex on the row and width 50% on the row children.

Then you can apply a border to the row.

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

回复收藏 0 原文

~没有更多了~