How can I get the same distance between two buttons and a select element on the same line?-CodePudding

I use Bootstrap 5 and I tried to place a select and 2 buttons on the same line (select should be in center, one button on the right side of the select, and another button on the left side), but I didn't succeed two things

get the same distance between select and buttons
get the same distance between buttons and div end.

As in the image: select should have most of the space from line, buttons should not touch the select, buttons should not touch the div end. The problem is about the distance between buttons and select and the distance between buttons and div end.

Please see the image. (the problems can be seen more clearly on small screens)

HTML: (I don't use other CSS file)

            <div >
                <div >
                    <button >Prev</button>
                </div>
                <div >
                    <select  aria-label="Default select example">
                        <option selected>Open this select menu</option>
                        <option value="1">One</option>
                        <option value="2">Two</option>
                        <option value="3">Three</option>
                    </select>
                </div>
                <div >
                    <button >Next</button>
                </div>
            </div>

Note: the border ins't included in html, I added that border with Paint editor just for a better view of the situation.

CodePudding user response：

I'd use a simple flex layout instead of trying to bang columns into shape. Use flex-fill on the center element to get it to stretch, and add horizontal (x-axis) margin & padding for spacing. I used both to match the default container padding. You could certainly use other combinations if you don't use a container.

body {
  background: pink !important; /* for spacing visualization */
}

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

<div >
  <div >
    <div>
      <button >Prev</button>
    </div>

    <div >
      <select  aria-label="Default select example">
        <option selected>Open this select menu</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
      </select>
    </div>

    <div>
      <button >Next</button>
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>

CodePudding user response：

I think instead of this, you should use Flexbox for this as flex is literally the best way to evenly distribute items in a container.

<div  style="display: flex; justify-content: space-evenly"> <!-- You can also try space-around and space-between instead of space-evenly if that suits your purpose -->

                <div >
                    <button >Prev</button>
                </div>
                <div >
                    <select  aria-label="Default select example">
                        <option selected>Open this select menu</option>
                        <option value="1">One</option>
                        <option value="2">Two</option>
                        <option value="3">Three</option>
                    </select>
                </div>
                <div >
                    <button >Next</button>
                </div>
            </div>