Html 为什么`<；输入/>；`向下拖动父div？

input

元素似乎向下拖动父

div

。为什么会这样？我怎样才能修好它

html

  <div class="main">
    <div class="one">
    </div>
    <div class="two">
      <input type="text" /> <!-- Without this input, the page looks fine -->
    </div>
    <div class="three">
    </div>
  </div>

---

以下是效果：

这是因为您给出了：

display:inline块。要解决此问题，请给出：

vertical-align: top;

预览


原因：默认情况下，内联块元素倾向于与
基线对齐

小提琴：
这是因为您给出了：
显示：内联块。要解决此问题，请给出：

vertical-align: top;

预览


原因：默认情况下，内联块元素倾向于与
基线对齐

小提琴：
您可以通过添加
浮动：左来修复它
到
。一个
和
两个
您可以通过添加
浮点：左到
。一个
和
两个
添加

vertical-align: text-top;

添加到您的
.main>div

vertical-align: text-top;

到你的
.main>div
我正要解释。OP需要一个理由和解决方案。你完全给出了一个复杂的解决方案。“我想引起你们的注意，这就是否决投票的原因，但我现在把它删除了。”PraveenKumar understoodI正要解释。OP需要一个理由和解决方案。你完全给出了一个复杂的解决方案。“我想引起你们的注意，这就是否决投票的原因，但我现在把它删除了。”PraveenKumar understoodWow。你跑得真快！非常感谢。现在我知道有了
基线
Wow。你跑得真快！非常感谢。现在我知道有了
baseline
Boss，
text-top
似乎有风险。您是否可以尝试使用
top
？在哪些情况下您希望它失败？浏览器支持？哎呀？老大，
文本顶部
似乎有风险。您是否可以尝试使用
top
？在哪些情况下您希望它失败？浏览器支持？恶心？