Question

我正在制作一个HTML表单，但是遇到了一个奇怪的问题。最后三个表单控件（标签，文本输入和提交按钮）显示在同一行上，但前两个（标签和文本输入）显示在单独的行上。为什么是这样？据我所知，所有表单控件都自动设置为display: inline-block。

这是小提琴：

＆＃13;

@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;
}

＆＃13;

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

＆＃13;

（注意：您将要全屏显示它。这被设计为基于Web的桌面应用程序，因此布局不会缩放）

Answer 1

由于您的<div id="msg">元素，它们被拆分了。它已应用float: right;，并且width: 75%;也应用了它，因此表单元素在#msg div周围流动。

请记住，float的最初目的是将图像放在文本文档的正常流程中，以使文本自然地围绕它们流动。

如果您将#msg div设置为width: 50%;，您会看到所有表单项都开始内联流动。

您可以通过清除form {}选择器上的浮动来解决此问题：

@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;
    clear: right; /* This is the new style */
}

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>

Answer 2

所有浏览器中的表单都有display:block。只需添加：

form {
border: 1px solid red;
display: inline-block;
}

或使用更现代的flex。

为什么前两个表单控件有自己的行？

2 个答案: