内容未正确显示

Question

编辑：这里是http://flameforged.altervista.org/games/gd/

的链接

我在<main>元素中有4个div，我将它们设置为直接显示在同一条线上，无论如何。

当我在所有div中说<h3>Title</h3>时，它们都会正确显示，但是一旦我添加了一个小输入字段<input type="text">，所有其他div似乎都会向下移动。

我不知道如何解决这个问题是我的css和html

＆＃13;

＆＃13;

body{
	width: 100%;
    height: 100%;
}

header{
	background-color: #c0c0c0;
    border-radius: 0px 0px 0px 0px;
	-moz-border-radius: 0px 0px 0px 0px;
	-webkit-border-radius: 0px 0px 0px 0px;
	border: 1px solid #c4bac4;
}

.nav-bar{
	display: inline;
    float: right;
}

.panel{
	display: inline-block;
    border-radius: 0px 0px 0px 0px;
	-moz-border-radius: 0px 0px 0px 0px;
	-webkit-border-radius: 0px 0px 0px 0px;
	border: 1px solid #c4bac4;
    width: 24%;
    height: 100%;
    padding: 2px;
    margin-left: 0%;
}

＆＃13;

    <main>
    	<div class="panel" id="researchPanel">
        	<h3>Research</h3>
        </div>
        <div class="panel" id="typerPanel">
        	<h3>HTML Terminal</h3>
        	<form>
        		<input type="text" class="typer" id="typer" placeholder="Type an HTML tag">
            </form>
        </div>
        <div class="panel" id="employeePanel">
        	<h3>Employees</h3>
        </div>
        <div class="panel" id="upgradesPanel">
        	<h3>Upgrades</h3>
        </div>
    </main>

＆＃13;

＆＃13;

＆＃13;

Answer 1

将vertical-align: top提交给小组。这是你的工作答案

＆＃13;

＆＃13;

body{
	width: 100%;
    height: 100%;
}

header{
	background-color: #c0c0c0;
    border-radius: 0px 0px 0px 0px;
	-moz-border-radius: 0px 0px 0px 0px;
	-webkit-border-radius: 0px 0px 0px 0px;
	border: 1px solid #c4bac4;
}

.nav-bar{
	display: inline;
    float: right;
}

.panel{
	display: inline-block;
    border-radius: 0px 0px 0px 0px;
	-moz-border-radius: 0px 0px 0px 0px;
	-webkit-border-radius: 0px 0px 0px 0px;
	border: 1px solid #c4bac4;
    width: 24%;
    height: 100%;
    padding: 2px;
    margin-left: 0%;
vertical-align: top;
}

＆＃13;

    <main>
    	<div class="panel" id="researchPanel">
        	<h3>Research</h3>
        </div>
        <div class="panel" id="typerPanel">
        	<h3>HTML Terminal</h3>
        	<form>
        		<input type="text" class="typer" id="typer" placeholder="Type an HTML tag">
            </form>
        </div>
        <div class="panel" id="employeePanel">
        	<h3>Employees</h3>
        </div>
        <div class="panel" id="upgradesPanel">
        	<h3>Upgrades</h3>
        </div>
    </main>

＆＃13;

＆＃13;

＆＃13;