html FORM tag messing up my css display inline

Question

when I add the <form> tag in my HTML, it messes up the "inline" display of my form.

HTML that works:

<div class="header">
<a href="index.html"> <img src="icon.png" width="45"></a>
<div class="headertitle">TITLE</div>

    <select class="form-field">
    <option>test</option> 
    </select>

    <select class="form-field" >
    <option>test2</option>
    </select>

    <div class="headermenu">test3</div> 

    <select class="form-field" >
    <option>test4</option>
    </select>

   <div class="headermenu">test5</div>
 </div>

and if I add <form> it doesn't work... see html code:

<form action="<?php echo $_SERVER['PHP_SELF']?>" method="post" name="form1">    
    <select class="form-field">
    <option>test</option> 
    </select>

    <select class="form-field" >
    <option>test2</option>
    </select>

    <div class="headermenu">test3</div> 

    <select class="form-field" >
    <option>test4</option>
    </select>

</form>

look at image for working and non working image....

here is my CSS:

.header{width: 100%; background-color: #5e6172;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;    /* vertical align */
justify-content: center;    /* horizontal align */
position: fixed;
top:0; 
height: 80px;
} 

 .headertitle{color: #ffffff; font-size: 1.7em; font-family: h35; margin: 0 0.5%; 
 font-weight:bold; display: inline-block;}

 .headermenu{color: #ffffff; font-size: 1.4em; font-family: h35; margin: 0 0.3%; 
 display: inline-block;}

.form-field {background: #fff; color: #5e6172; padding:4px;  font-family: h35; 
 font-size: 1.2em; margin: 0 0.4%; }

.form-field:focus {background: #e0dedf;    color: #725129;    }

enter image description here

jmore009 · Accepted Answer · 2014-12-29 02:15:59Z

2

you can add display: inline-flex to form to fix the container's width:

FIDDLE

answered Dec 29, 2014 at 2:15

jmore009

12.9k1 gold badge21 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user3011784 Over a year ago

Thank you... but I see your TEST3 is slightly above the vertical center compare to the other ones.. how could I correct that ?

jmore009 Over a year ago

@user3011784 what browser are you on?

jmore009 Over a year ago

can you post a screen shot? im on chrome and im not seeing an alignment issue

user3011784 Over a year ago

well, it works well on my site.. the FiDDLE shows a slight problem, but on my site it's fine.. so thank you for the answer

Yami Odymel · Accepted Answer · 2024-03-12 18:53:56Z

0

The .header is a Flexbox, and it should have direct flex children, but <form> is blocking it.

Just add display: contents style to <form> so it will be ignored in CSS box/layout.

form {
    display: contents;
}

answered Mar 12, 2024 at 18:53

Yami Odymel

1,9366 gold badges23 silver badges53 bronze badges

Collectives™ on Stack Overflow

html FORM tag messing up my css display inline

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related