使用"display:inline-block"但我的 DIV 仍然出现在新行上

Question

我有两个块元素，我想在同一条水平线上。 一个是表单，另一个是 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 元素出现在同一行上？

Answer 1

当有大量

文本时，您必须通过对inline-block元素应用width设置来限制元素的宽度，这些设置允许两个元素适合一行，例如width: 50%和width: 45%否则，默认情况下，它们将根据文本进行扩展，当有足够的文本填充整行时，这将导致 100% 的宽度。

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

Answer 3

将其添加到您的 CSS 中

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

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

Answer 4

这是一个工作示例： 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>

Answer 5

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

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

Answer 6

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