1
我正在制作一个HTML表单，但遇到了一个奇怪的问题。最后三个表单控件（标签，文本输入和提交按钮）显示在同一行上，但前两个（标签和文本输入）显示在不同的行上。为什么是这样？据我所知，所有表单控件自动设置为display: inline-block。为什么前两个表单控件都有自己的行？
这里是小提琴：
@import url(https://fonts.googleapis.com/css?family=Montserrat);
@import url(https://fonts.googleapis.com/css?family=Nunito);
body {
margin-top: 0;
}
header {
height: 15vh;
width: 100%;
border-bottom: 3px solid white;
background: rgba(0, 255, 100, 0.8);
text-align: center;
color: rgba(0, 60, 0, 1);
position: relative;
z-index: 2;
display: flex;
justify-content: space-between;
}
.left {
display: flex;
flex-direction: column;
width: 20%;
}
header .logo {
max-width: 100%;
max-height: 15vh;
background: white;
padding: 0;
}
header .logo:hover {
background: #ddd;
}
header .right {
float: right;
display: flex;
justify-content: space-between;
flex-direction: column;
flex-basis: 90%;
}
header h1, header .right p {
width: 100%;
}
header h1 {
font-size: 3em;
align-self: flex-end;
color: white;
margin: 0;
font-family: 'Nunito';
}
header .right p {
font-family: 'Montserrat';
font-size: 1.5em;
color: rgba(100, 100, 100, 0.8);
margin: 0;
margin-top: auto;
}
header .logout {
width: 100%;
height: 50px;
display: flex;
justify-content: center;
border: 2px solid rgba(200, 240, 200, 1);
border-radius: 10px;
background: rgba(200, 255, 200, 0.8);
color: white;
}
header .logout:hover {
background: rgba(100, 200, 255, 1);
cursor: pointer;
}
header .logout p {
height: 20px;
font-family: 'Modern No. 20', 'Ubuntu', 'Arial', sans-serif;
font-weight: bold;
font-size: 1.5em;
align-self: center;
margin-top: auto;
}
#msg {
width: 75%;
float: right;
background: rgba(255, 200, 0, 1);
height: 50px;
position: relative;
bottom: 50px;
right: 30px;
}
@keyframes scroll {
2% {bottom: 49px;}
4% {bottom: 48px;}
6% {bottom: 47px;}
8% {bottom: 46px;}
10% {bottom: 45px;}
12% {bottom: 44px;}
14% {bottom: 43px;}
16% {bottom: 42px;}
18% {bottom: 41px;}
20% {bottom: 40px;}
22% {bottom: 39px;}
24% {bottom: 38px;}
26% {bottom: 37px;}
28% {bottom: 36px;}
30% {bottom: 35px;}
32% {bottom: 34px;}
34% {bottom: 33px;}
36% {bottom: 32px;}
38% {bottom: 31px;}
40% {bottom: 30px;}
42% {bottom: 29px;}
44% {bottom: 28px;}
46% {bottom: 27px;}
48% {bottom: 26px;}
50% {bottom: 25px;}
52% {bottom: 24px;}
54% {bottom: 23px;}
56% {bottom: 22px;}
58% {bottom: 21px;}
60% {bottom: 20px;}
62% {bottom: 19px;}
64% {bottom: 18px;}
66% {bottom: 17px;}
68% {bottom: 16px;}
70% {bottom: 15px;}
72% {bottom: 14px;}
74% {bottom: 13px;}
76% {bottom: 12px;}
78% {bottom: 11px;}
80% {bottom: 10px;}
82% {bottom: 9px;}
84% {bottom: 8px;}
86% {bottom: 7px;}
88% {bottom: 6px;}
90% {bottom: 5px;}
92% {bottom: 4px;}
94% {bottom: 3px;}
96% {bottom: 2px;}
98% {bottom: 1px;}
100% {bottom: 0px;}
}
form {
width: 80%;
margin: auto;
height: 83vh;
background: rgba(0, 100, 100, 0.5);
border-radius: 5px;
}
body {
background: rgba(0, 200, 100, 0.3);
}
#name, #d {
font-size: 2em;
font-family: 'Montserrat';
margin-left: 20px;
}
input[name=name] {
}
form, form * {
border: 1px solid red;
}<header>
<div class="left">
<a href="../pages" title="Main Menu">
<img class="logo" src="#" alt="logo"/>
</a>
<div class="logout">
<p>Logout</p>
</div>
</div>
<div class="right">
<h1>*Edited Out* Inventory Software</h1>
</div>
</header>
<div id="msg"></div>
<form action="../scripts/f.php" method="post">
<label id="name" for="name">Name:</label>
<input type="text" name="name"/>
<label id="d" for="descript">Description:</label>
<input type="text" name="descript"/>
<button>Submit</button>
</form>（注：你将要全屏呢？这被设计成一个基于Web的桌面应用程序，所以布局没有按't scale）