html FORM 标签搞乱了我的 css 内联显示

Question

当我添加 <form>标记在我的 HTML 中，它会扰乱我表单的“内联”显示。

有效的 HTML:

<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>

如果我添加 <form>它不起作用...请参阅 html 代码:

<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>

查看工作图像和非工作图像....

这是我的 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;    } 

Answer 1

可以在form中添加display: inline-flex来固定容器的宽度:

FIDDLE