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

Question

当我在HTML中添加<form>标记时，它会混淆＆＃34;内联＆＃34;显示我的表格。

有效的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

您可以将display: inline-flex添加到form以修复容器的宽度：

FIDDLE