调整浏览器大小时，div 中的项目会自动占据空间。 CSS HTML

Question

Want these select tags and a button inside a div to automatically occupy the white space whatever size of the screen or browsers.

These is the result when I use a large screen and give white space: Image1

And I want to look like this no matter what size of the browser or screen is: Image2

Just need a bit of help...

Codes:

 *{ padding:0px; box-sizing: border-box; margin: 0; font-family: serif; }.filter{ display: grid; position: absolute; align-items: center; justify-content: center; width: 100%; height: 3em; white-space: normal; padding: 1em; overflow: hidden; }.filter-by{ display: flex; position: absolute; left:1em; }.colour-option{ display: flex; position: absolute; left:15em; }.recipient-option{ display: flex; position: absolute; left:30em; width: 7.5%; }.occasion-option{ display: flex; position: absolute; left:46em; width: 7.5%; }.price-option{ display: flex; position: absolute; left:65em; width: 7%; }.clear-button{ display: inline-block; position: absolute; left:93em; border-radius: 10px; border-top-left-radius: 30px 25px; border-bottom-left-radius: 30px 25px; width: 6em; height:2em; border-bottom: 1px solid rgba(255,255,255,0.3); box-shadow:-1px -1px 0px rgba(0,0,0,0.2)inset, 0 1px 2px rgba(0,0,0,0.8)inset; } select{ /* Select Reset */ border: 1px solid; background: transparent; cursor: pointer; /* custom select appearance */ padding: 5px 5px 5px 5px; font-size: 14px; display:inline-block; width: 100%; } } @media only screen and (max-width: 760px), (min-width: 768px) and (max-width: 1024px) { /*... */ select { width: 150px; } }

 <div class="filter"> <lable class ="filter-by"><b>Filter by:</b></lable> <form class="colour-option"> <select id ="colour"> <option value = "0" selected="selected" style="text-align: center; font-weight: bolder"><strong>Colour:</strong></option> <option value = "1"style="text-align: right;"> Red </option> <option value = "2" style="text-align: right;">Yellow</option> <option value = "3" style="text-align: right;">Orange</option> <option value = "4" style="text-align: right;">Green</option> <option value = "5" style="text-align: right;">Pink</option> <option value = "6" style="text-align: right;"> Purple </option> <option value = "7" style="text-align: right;">White</option> <option value = "8" style="text-align: right;">Dark</option> </select> </form> <form class="recipient-option"> <select id ="recipient"> <option value = "0" selected="selected" style="text-align: center; font-weight: bolder"><strong>Recipient:</strong></option> <option value = "1"style="text-align: right;"> Baby </option> <option value = "2" style="text-align: right;">For Her</option> <option value = "3" style="text-align: right;">For Him</option> <option value = "4" style="text-align: right;">For Family</option> <option value = "5" style="text-align: right;">Corporate Flowers</option> </select> </form> <form class="occasion-option"> <select id ="occasion"> <option value = "0" selected="selected" style="text-align: center; font-weight: bolder"><strong>Ocassion:</strong></option> <option value = "1"style="text-align: right;"> Birthday</option> <option value = "2" style="text-align: right;">Mothers Day</option> <option value = "3" style="text-align: right;">Easter</option> <option value = "4" style="text-align: right;">Thank you</option> <option value = "5" style="text-align: right;">Romantic</option> <option value = "6"style="text-align: right;"> Get Well</option> <option value = "7" style="text-align: right;">Congratulations</option> <option value = "8" style="text-align: right;">Valentines</option> <option value = "9" style="text-align: right;">Christmas</option> <option value = "10" style="text-align: right;">Wedding</option> <option value = "10" style="text-align: right;">Farewell</option> </select> </form> <form class="price-option"> <select id ="price"> <option value = "0" selected="selected" style="text-align: center; font-weight: bolder"><strong>Price:</strong></option> <option value = "1"style="text-align: right;"> 5 NZD - 20 NZD </option> <option value = "2" style="text-align: right;"> 20 NZD - 80 NZD </option> <option value = "3" style="text-align: right;"> 90 NZD - 150 NZD </option> <option value = "4" style="text-align: right;"> 160 NZD - 500 NZD + </option> </select> </form> <button class = "clear-button"> Clear all </button> </div>

Answer 1

It's a problem with your display in your different element. I have correct it in the code under

Try to change your css with this one and this will be good.

 *{ padding:0px; box-sizing: border-box; margin: 0; font-family: serif; }.filter{ display: flex; align-content: center; justify-content: space-between; width: 100%; height: 3em; white-space: normal; padding: 1em; overflow: hidden; }.filter-by{ left:1em; }.colour-option{ left:15em; }.recipient-option{ left:30em; width: 7.5%; }.occasion-option{ left:46em; width: 7.5%; }.price-option{ left:65em; width: 7%; }.clear-button{ left:93em; border-radius: 10px; border-top-left-radius: 30px 25px; border-bottom-left-radius: 30px 25px; width: 6em; height:2em; border-bottom: 1px solid rgba(255,255,255,0.3); box-shadow:-1px -1px 0px rgba(0,0,0,0.2)inset, 0 1px 2px rgba(0,0,0,0.8)inset; } select{ /* Select Reset */ border: 1px solid; background: transparent; cursor: pointer; /* custom select appearance */ padding: 5px 5px 5px 5px; font-size: 14px; display:inline-block; width: 100%; } } @media only screen and (max-width: 760px), (min-width: 768px) and (max-width: 1024px) { /*... */ select { width: 150px; } }

Answer 2

You were messing up with the grid container. The children contents should not have position absolute if you gave the container display: grid; or display: flex; .

In my example I chose to opt with a flex container instead, and changed the children as display: block; flex: 1 display: block; flex: 1 . They will show up in line and centered having a 1em margin-right.

 *{ padding:0px; box-sizing: border-box; margin: 0; font-family: serif; } /*flex container*/.filter{ position: absolute; display: flex; align-items: center; justify-content: center; width: 100%; height: 3em; white-space: normal; padding: 1em; overflow: hidden; } /*flex content*/.filter-by{ display: block; flex: 1; margin-right: 1em; } /*flex content*/.colour-option{ display: block; flex: 1; margin-right: 1em; } /*flex content*/.recipient-option{ display: block; flex: 1; margin-right: 1em; } /*flex content*/.occasion-option{ display: block; flex: 1; margin-right: 1em; } /*flex content*/.price-option{ display: block; flex: 1; margin-right: 1em; }.clear-button{ display: block; border-radius: 10px; border-top-left-radius: 30px 25px; border-bottom-left-radius: 30px 25px; width: 6em; height:2em; border-bottom: 1px solid rgba(255,255,255,0.3); box-shadow:-1px -1px 0px rgba(0,0,0,0.2)inset, 0 1px 2px rgba(0,0,0,0.8)inset; } select{ /* Select Reset */ border: 1px solid; background: transparent; cursor: pointer; /* custom select appearance */ padding: 5px 5px 5px 5px; font-size: 14px; display:inline-block; width: 100%; } } @media only screen and (max-width: 760px), (min-width: 768px) and (max-width: 1024px) { /*... */ select { width: 150px; } }

 <div class="filter"> <label class ="filter-by"><b>Filter by:</b></label> <form class="colour-option"> <select id ="colour"> <option value = "0" selected="selected" style="text-align: center; font-weight: bolder"> <strong>Colour:</strong> </option> <option value = "1"style="text-align: right;"> Red </option> <option value = "2" style="text-align: right;">Yellow</option> <option value = "3" style="text-align: right;">Orange</option> <option value = "4" style="text-align: right;">Green</option> <option value = "5" style="text-align: right;">Pink</option> <option value = "6" style="text-align: right;"> Purple </option> <option value = "7" style="text-align: right;">White</option> <option value = "8" style="text-align: right;">Dark</option> </select> </form> <form class="recipient-option"> <select id ="recipient"> <option value = "0" selected="selected" style="text-align: center; font-weight: bolder"> <strong>Recipient:</strong> </option> <option value = "1"style="text-align: right;"> Baby </option> <option value = "2" style="text-align: right;">For Her</option> <option value = "3" style="text-align: right;">For Him</option> <option value = "4" style="text-align: right;">For Family</option> <option value = "5" style="text-align: right;">Corporate Flowers</option> </select> </form> <form class="occasion-option"> <select id ="occasion"> <option value = "0" selected="selected" style="text-align: center; font-weight: bolder"> <strong>Ocassion:</strong> </option> <option value = "1"style="text-align: right;"> Birthday</option> <option value = "2" style="text-align: right;">Mothers Day</option> <option value = "3" style="text-align: right;">Easter</option> <option value = "4" style="text-align: right;">Thank you</option> <option value = "5" style="text-align: right;">Romantic</option> <option value = "6"style="text-align: right;"> Get Well</option> <option value = "7" style="text-align: right;">Congratulations</option> <option value = "8" style="text-align: right;">Valentines</option> <option value = "9" style="text-align: right;">Christmas</option> <option value = "10" style="text-align: right;">Wedding</option> <option value = "10" style="text-align: right;">Farewell</option> </select> </form> <form class="price-option"> <select id ="price"> <option value = "0" selected="selected" style="text-align: center; font-weight: bolder"> <strong>Price:</strong> </option> <option value = "1"style="text-align: right;"> 5 NZD - 20 NZD </option> <option value = "2" style="text-align: right;"> 20 NZD - 80 NZD </option> <option value = "3" style="text-align: right;"> 90 NZD - 150 NZD </option> <option value = "4" style="text-align: right;"> 160 NZD - 500 NZD + </option> </select> </form> <button class = "clear-button"> Clear all </button> </div>