使用“display:inline-block”，但我的 DIV 仍然出现在新行上答案

【问题标题】：Using "display:inline-block" but my DIV is still appearing on a new line使用“display:inline-block”，但我的 DIV 仍然出现在新行上
【发布时间】：2018-09-26 15:52:32
【问题描述】：

我有两个想要位于同一水平线上的块元素。一个是 FORM，另一个是 DIV。

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

我认为添加display:inline-block 是将元素保持在同一行的关键。但是当我添加

#buttonDescription {
    display: inline-block;
}

我的文本元素仍然出现在我的 FORM 元素下方——https://jsfiddle.net/5j57hkLr/6/。如何让其他 DIV 元素出现在同一行？

【问题讨论】：

#curWorkForm, #buttonDescription { display: inline-block;}
@VXp，根据我对 Gautum 的评论，当有很多文本似乎不起作用时——jsfiddle.net/5j57hkLr/16。文本块转到下一行，而我希望它与按钮保持在同一行。
jsfiddle.net/5j57hkLr/77

标签： html css inline display

【解决方案1】：

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

【讨论】：

这是做什么的？提供上下文和解释，让您的回答更有帮助。
虽然此代码可能会回答问题，但提供有关此代码为何和/或如何回答问题的额外上下文可提高其长期价值。

【解决方案2】：

以下是我考虑解决此问题的 3 种方法：（这是您的 JSFiddle 回复，有一些更改。）

1:

.wrapper {
  overflow: hidden;
  border: red dashed 1px;
  /* For Testing*/
}

.style {
  margin: 0;
  padding: 10px;
  float: left;
}

<div class="wrapper">
  <form>
    <input class="style" placeholder="Enter Value" />
  </form>
  <button class="style">Submit</button>
</div>

2：响应式

* {
  box-sizing: border-box;
  margin: 0;
}

input, button {padding:10px;}
input {width: 100%;} /* replace "input" with "input , button" if you want the button to take up full with*/


.column {
  float: left;
  width: 50%;
  border: red dashed 1px; /*For Testing*/
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

<meta name="viewport" content="width=device-width, initial-scale=1">
<div class="row">
  <div class="column">
    <form>
      <input class="style" placeholder="Enter Value" />
    </form>
  </div>
  <div class="column">
    <button class="style">Submit</button>
  </div>
</div>

3：

* {
  box-sizing: border-box;
  margin: 0;
}

#mainWrapper {
  overflow: hidden;
  display: inline-block;
}

button,
input {
  width: 100%;
  padding: 10px;
}

.formWrap {
  float: left;
  width: 300px;
}

.btnWrap {
  float: left;
  width: 100px;
}

<div id="mainWrapper">
  <div class="formWrap">
    <form>
      <input placeholder="Enter Value" />
    </form>
  </div>
  <div class="btnWrap">
    <button>Submit</button>
  </div>
</div>

【讨论】：

【解决方案3】：

你也可以使用flex来完成这项工作，代码如下

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

【讨论】：

【解决方案4】：

当有大量文本时，您必须限制inline-block 元素的宽度，方法是对它们应用width 设置，允许两个元素放在一行中，例如width: 50% 和width: 45% 否则默认会根据文本展开，当有足够的文本填满一整行时，会导致 100% 的宽度。

【讨论】：

【解决方案5】：

这是一个工作示例：https://jsfiddle.net/6wjftgf2/2/

#buttonDescription,form {
display: inline-block;
}
<div id="miningArea">
<form id="curWorkForm"><input placeholder="My Form"/></form>
<div id="buttonDescription">
    <button>My Button</button>
</div>  
</div>

【讨论】：

您的“miningArea”DIV 中只有一个元素。我的问题涉及两个元素——表单和包含文本的附加 DIV。

【解决方案6】：

将此添加到您的 CSS 中

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

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

【讨论】：

我试了一下，但是当我在我的文本部分添加更多文本时，它开始换行到下一行——jsfiddle.net/5j57hkLr/16。