Html 使用；显示：内联块“；但是我的DIV还在新的线上出现

我有两个块元素，我想在同一条水平线上。一个是表单，另一个是DIV

<div id="miningArea">
    <form id="curWorkForm">...</form>
    <div id="buttonDescription">
        To begin, click thde "Start" button.
    </div>  
</div>

我的文本元素仍然显示在我的表单元素--。如何使另一个DIV元素显示在同一行上？

将其添加到css中

#buttonDescription,form {
 display: inline-block;
 vertical-align:middle;
}

为了使两个或多个元素在同一行上，所有元素都应该显示为内联或内联块

#buttonDescription,form {
 display: inline-block;
 vertical-align:middle;
}

---

为了使两个或多个元素在同一行上，所有元素都应显示为内联或内联块。您也可以使用flex进行此工作。代码如下

.miningArea
{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
}
form
{
    width: 60%;
}
div
{
    width: 40%;
}

---

您也可以使用flex进行这项工作，代码如下

.miningArea
{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
}
form
{
    width: 60%;
}
div
{
    width: 40%;
}

---

以下是一个工作示例：

#按钮说明，表格{
显示：内联块；
}
我的纽扣

以下是一个工作示例：

#按钮说明，表格{
显示：内联块；
}
我的纽扣

当有大量文本时，您必须限制

内联块

元素的宽度，方法是对它们应用

宽度

设置，允许两个元素都可以放入一行，例如

宽度：50%

和

宽度：45%

---

否则，默认情况下，它们将根据文本进行扩展，当有足够的文本填充整行时，将产生100%的宽度。

当有大量文本时，您必须通过对

内联块

元素应用

宽度

设置来限制其宽度，该设置允许两个元素都适合一行，例如

宽度：50%

和

宽度：45%

---

否则，默认情况下，它们将根据文本展开，当有足够的文本填充整行时，将产生100%的宽度。

以下是我考虑的三种方法： （这是您的背部，有一些变化。）

1：

.wrapper{
溢出：隐藏；
边框：红色虚线1px；
/*用于测试*/
}
.风格{
保证金：0；
填充：10px；
浮动：左；
}

提交

以下是我想到的三种方法： （这是您的背部，有一些变化。）

1：

.wrapper{
溢出：隐藏；
边框：红色虚线1px；
/*用于测试*/
}
.风格{
保证金：0；
填充：10px；
浮动：左；
}

提交

#curWorkForm，#buttonDescription{display:inline block；}@VXp，根据我对Gautum的评论，当有很多文本似乎不起作用时--。文本块转到下一行，而我希望它与按钮保持在同一行。#curWorkForm，#buttonDescription{display:inline block；}@VXp，根据我对Gautum的评论，当有很多文本块似乎不起作用时--。文本块转到下一行，而我希望它与按钮保持在同一行。我尝试了一下，但当我向文本部分添加更多文本时，它开始换行到下一行--。我尝试了一下，但当我向文本部分添加更多文本时，它开始换行到下一行--。您的文本中只有一个元素“miningArea”分区。我的问题涉及两个元素——表单和包含文本的附加分区。在“miningArea”分区中只有一个元素“DIV。我的问题涉及两个元素——表单和一个包含文本的附加DIV。这是做什么的？”？提供上下文和解释，使您的答案更有帮助。虽然此代码可以回答此问题，但提供有关此代码为什么和/或如何回答此问题的其他上下文可提高其长期价值。这有什么作用？提供上下文和解释，使您的答案更有帮助。虽然此代码可以回答问题，但提供有关此代码回答问题的原因和/或方式的其他上下文可以提高其长期价值。

 .miningArea { 
   display: flex; 
   flex-wrap: wrap; 
 } 
 form { width: 60%; } 
 div { width: 40%; }