Kevin Powell - Community•16mo ago

Fixing margin(?) issue

Hey! so in image, you'll notice that the first Select (with the text "All" is more to the right due to the others having an X, which the first one doesn't need I already attempted with an "::after" it didn't help I already tried putting a margin-left as well as padding-left on the X, it didn't help I also tried the opposite, a padding & margin right on the select Didn't help either it just doesn't want to re-arrange itself... Could it be bc the parent element is on margin:auto ? HTML

 <div class="dialog-gameSelectors">
   <h2>Select game</h2>
   <select name="games" class="bingo-games">
      <option> [...]
   </select>
</div>

 <div class="dialog-gameSelectors">
   <h2>Select game</h2>
   <select name="games" class="bingo-games">
      <option> [...]
   </select>
</div>

CSS

*, ::before, ::after{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

dialog{
    margin:auto;
    border-radius:20px;
    width:250px;
}

dialog *{
    text-align: center;
    margin:5px auto;
}

dialog i{
    cursor:pointer;
    margin-left:5px;
}

*, ::before, ::after{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

dialog{
    margin:auto;
    border-radius:20px;
    width:250px;
}

dialog *{
    text-align: center;
    margin:5px auto;
}

dialog i{
    cursor:pointer;
    margin-left:5px;
}

(Only added the code related to the issue, if you desire a codepen version, please give me about max 20 hours depending on when requested as I'll be out tomorrow)

2 Replies

Choo♚𝕂𝕚𝕟𝕘•16mo ago

The text-align is inherited and affects the position of the select elements. Apply text-align:left to dialog-gameSelectors.

BrightieOP•16mo ago

alright I'll give that a try when im back

Gaming

Programming

Fixing margin(?) issue