Question

div我遇到了一些问题，我希望form旁边有一些input标记。当我在两者中使用display: inline-block时，div位置略低于form的位置。

我真的不知道为什么以及如何解决这个问题。我试图在互联网上找到答案，但失败了。

HTML：

<body>
  <form class="row">
    <input type="text">
    <input type="text">
    <input type="text">
  </form>
  <div class="row">
    second column
  </div>
</body>

CSS：

input {
  display: block;
}

.row {
  display: inline-block;
  border: 1px solid black;
  width: 48%;
  height: 200px;
}

https://jsfiddle.net/saren86/e9jt8xyk/1/

Answer 1

表现总是很奇怪，但可以用overflow: hidden;

来解决

＆＃13;

input {
  display: block;
}

.row {
  display: inline-block;
  border: 1px solid black;
  width: 48%;
  height: 200px;
  overflow: hidden;
}

＆＃13;

<body>
  <form class="row">
    <input type="text">
    <input type="text">
    <input type="text">
  </form>
  <div class="row">
    second column
  </div>
</body>

＆＃13;

Answer 2

如果您可以自由使用CSS3，flex layout将是另一种选择。

只需将其设置在身体上：

＆＃13;

body {
  display:flex;
}

input {
  display: block;
}

.row {
  border: 1px solid black;
  width: 48%;
  height: 200px;
}

＆＃13;

<body>
  <form class="row">
    <input type="text">
    <input type="text">
    <input type="text">
  </form>
  <div class="row">
    second column
  </div>
</body>

＆＃13;

Answer 3

只需添加float：left;你的.row课程，你已经修好了。

.row {
    display: inline-block;
    float: left;
    border: 1px solid black;
    width: 48%;
    height: 200px;
}

https://jsfiddle.net/dd5kku0k/

Answer 4

添加vertical-align：top;到.row选择器;

input {
  display: block;
}

.row {
  display: inline-block;
  border: 1px solid black;
  width: 48%;
  height: 200px;
  vertical-align:top;
}

<body>
  <form class="row">
    <input type="text">
    <input type="text">
    <input type="text">
  </form>
  <div class="row">
    second column
  </div>
</body>

div的位置放在FORM旁边

4 个答案: