Align elements on top of other html css

Asked

Viewed 44 times

-1

Good morning, I need to align the two date fields that are below with the two top fields. What’s the best way to do this?

Foto

According to the image, when I give margin left auto no span it is not exactly below. How would I line up? Thank you very much

                    <select id="slcGrafico" style="width:260px; " onchange="chgOpcaoGrafico()" class="browser-default custom-select">
                        <option value="1" selected>Comparar com o dia</option>
                        <option value="5">Comparação média</option>
                        <option value="2">Busca amostragem

                        <option value="3">Origem x Destino</option>
                        <option value="4">Estudante x Passe Livre</option>



                    </select>



                         <div style="display: flex;float: right;margin-left: 10px; " id="inputGrafico">
                             <input id="valorFiltroGrafico1" type="date" value="2020-01-12" style="height: calc(2.25rem + 2px);">
                             <input id="valorFiltroGrafico2" type="date" value="2020-01-12" style="margin-left:5px;height: calc(2.25rem + 2px);">
                        </div>

                    <div style="display: flex;margin-top:3px; " class="row">



                        <span style="margin-left: auto;" >   

                            <input id="valorFiltroGrafico3" type="date" value="2020-01-12" style="height: calc(2.25rem + 2px);">
                            <input id="valorFiltroGrafico4" type="date" value="2020-01-12" style="margin-left:5px;height: calc(2.25rem + 2px);">
                        </span>


                    </div>
html css

  • Why not create a structure that places the elements within Divs with the same dimensions so that they are aligned correctly? for example: https://pasteboard.co/JO0WSuO.png

  • It would be nice if you used the bootstrap grid classes to maintain the alignment you want or also create your own grid. How to grid: <a href="https://www.youtube.com/watch?v=HN1UjzRSdBk">Unraveling the CSS Grid in practice | Mayk Brito</a>

1 answer

0

The space between the elements (horizontal) is different, between the elements from below is larger than from above. Also you used margin-left in one div and not in the other, I did some tests, see if this way works:

<select id="slcGrafico" style="width:260px; " onchange="chgOpcaoGrafico()" class="browser-default custom-select">
                    <option value="1" selected>Comparar com o dia</option>
                    <option value="5">Comparação média</option>
                    <option value="2">Busca amostragem

                    <option value="3">Origem x Destino</option>
                    <option value="4">Estudante x Passe Livre</option>



                </select>



                     <div style="display: flex;float: right;margin-left: 10px; " id="inputGrafico">
                         <input id="valorFiltroGrafico1" type="date" value="2020-01-12" style="height: calc(2.25rem + 2px);">
                         <input id="valorFiltroGrafico2" type="date" value="2020-01-12" style="margin-left:10px;height: calc(2.25rem + 2px);">
                    </div>

                <div style="display: flex;float: right;margin-left: 10px;margin-top:3px; " class="row">



                    <span style="margin-left: 1473px;" >   

                        <input id="valorFiltroGrafico3" type="date" value="2020-01-12" style="height: calc(2.25rem + 2px);">
                        <input id="valorFiltroGrafico4" type="date" value="2020-01-12" style="margin-left:5.5px;height: calc(2.25rem + 2px);">
                    </span>


                </div>

With margin-left:auto; span, all elements were aligned horizontally.

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.