Equal Spacing Between Arbitrary Number of Buttons-CodePudding

I have a group of multiple buttons that span multiple lines, but when a button no longer fits on a line it just goes on the next line and the remaining space is left blank. I'd instead like to have equal spacing between the buttons that did make it onto that line so that the line appears full.

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev nYRRuWlolflfl" crossorigin="anonymous">



<div  style="width: 90%;" >
<input type='submit' name="my_button"  value='Test'>

<input type='submit' name="my_button"  value='Test 2'>


<input type='submit' name="my_button"  value='Test 3'>

<input type='submit' name="my_button"  value='Test Much Longer String That Makes This Multiple Lines 4'>

<input type='submit' name="my_button"  value='Test 5'>

</div>

I would like to make it so that the buttons end up spaced out such that there are multiple buttons on a line, but that each line is full. There are a number of different examples that create columns explicitly, but they all seem to assume that you know how many buttons/columns you'll have vs. having buttons of different sizes and auto-adjusting the spacing between them. I'd like to be able to auto-adjust the spacing between so that they'll fill the full line, e.g. space out 1 2, 3 so 1 starts at the far left and 3 ends at the far right. How can I do that?

CodePudding user response：

I see your useing Bootstrap, check out Flex. You can use something like: d-flex flex-wrap justify-content-between on the perent element.

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev nYRRuWlolflfl" crossorigin="anonymous">

<div >
<input type='submit' name="my_button"  value='Test'>

<input type='submit' name="my_button"  value='Test 2'>


<input type='submit' name="my_button"  value='Test 3'>

<input type='submit' name="my_button"  value='Test Much Longer String That Makes This Multiple Lines 4'>

<input type='submit' name="my_button"  value='Test 5'>

</div>

CodePudding user response：

If you replace the <div > wit the classes <div > the links will be distributed in equal space between them along the parent div.

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev nYRRuWlolflfl" crossorigin="anonymous">



<div  style="width: 90%">
<input type='submit' name="my_button"  value='Test'>

<input type='submit' name="my_button"  value='Test 2'>


<input type='submit' name="my_button"  value='Test 3'>

<input type='submit' name="my_button"  value='Test Much Longer String That Makes This Multiple Lines 4'>

<input type='submit' name="my_button"  value='Test 5'>

</div>