What is the best way to arrange two buttons in a row with a border separating each row?

Question

What is the best way to arrange two buttons in a row with a border separating each row?

I am currently working with angular 8 and I am in need of creating a webpage design using HTML, CSS, or Bootstrap.

The issue I am encountering is how to align every two buttons next to each other with borders, and once the first row is completed, move to a new row with new buttons.

https://i.sstatic.net/YZYLD.png

This is what I have tried:

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

html css bootstrap-4 angular8 text-align

Answer 1

Answer №1

Divide each row into two columns by utilizing display: flex on the row and setting width 50% on the row children.

After that, you have the option to add 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>

Answer 2

Divide each row into two columns by utilizing display: flex on the row and setting width 50% on the row children.

After that, you have the option to add 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>

What is the best way to arrange two buttons in a row with a border separating each row?

Answer №1

Similar questions

Ensure that the spinner div is horizontally centered within the side menu, even if a scroll

A guide to extracting data from HTML tables using Python for web scraping and exporting the results to

Can you customize the "rem" values for individual Web Components when using Angular 2's ViewEncapsulation.Native feature?

What is the best method to dynamically assign a class to a TD element in a data table when adding

What is the reason for needing a page reload in Javascript or JQuery?

PHP and AJAX allow for seamless data retrieval without the need for page refreshing, and the data can be easily displayed in a modal window

Maximizing Efficiency: Utilizing a Single jQuery Function to Retrieve Specific Values

What is the best way to eliminate data from a channel title using jQuery?

Tips on sending asynchronous requests to a PHP page using jQuery AJAX

It is impossible to add a new element between two existing elements that share the same parent

The accordion feature fails to function properly when incorporated into an ajax response

Struggling to send data to child components in Vue: Received an object instead of the expected string value of "[object Object]"

What are some methods for creating a responsive table design?

Comparison of utilizing PHP within CSS versus Implementation through JavaScript [General]

Struggling to perfectly center the NavBar within the wrap container

Tips on displaying the number of items ordered above the cart icon

Generate a new web component using JavaScript

Select the hidden HTML option value automatically according to the previous option selected

Exploring Browser History using Cascading Style Sheets

What is the best way to align the 'Typography' component in the center?