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

Question

我有两个块元素，我希望它们位于同一水平线上。一个是 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 元素出现在同一行上？

Answer 1

将此添加到您的 css

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

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

Answer 2

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

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

Answer 3

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

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

Answer 5

这些是我考虑解决这个问题的 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 6

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

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

Using "display:inline-block" but my DIV is still appearing on a new line

html

css

inline

display