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

这是我考虑接近这个的三种方式：（这是您的JSFiddle后面的一些更改。）

1：

pip3.5 install numpy

.wrapper {
  overflow: hidden;
  border: red dashed 1px;
  /* For Testing*/
}

.style {
  margin: 0;
  padding: 10px;
  float: left;
}

2：响应

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

* {
  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%;
  }
}

3：

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

* {
  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;
}

Answer 2

将此添加到您的css

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

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

Answer 3

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

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

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

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

Answer 6

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

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

6 个答案: