內聯塊樣式的兩個div未對齊

Question

我有兩個div標簽，只有一個有input標簽; 為什么輸出是這樣的？

 div.logo, div.form { display: inline-block; height: 200px; width: 200px; border: 1px dotted; } 

 <div class="logo"> <input type="text"> </div> <div class="form"> </div> 

輸出：

有誰能解釋一下？ 這是小提琴： https ： //jsfiddle.net/ag487L5m/

Answer 1

那是因為內聯元素的垂直對齊默認為基線。 將其更改為頂部：

div.logo, div.form { 
  display: inline-block;
  height: 200px;
  width: 200px;
  border: 1px dotted;
  vertical-align:top;
}

 div.logo, div.form { display: inline-block; height: 200px; width: 200px; border: 1px dotted; vertical-align:top; } 

 <div class="logo"> <input type="text"> </div> <div class="form"> </div> 

Answer 2

默認情況下， inline inline-block和inline-block元素設置為vertical-align: baseline 。

由於div.logo有一個文本輸入， div.form現在是一個inline-block元素，它在input的基線上對齊。

將vertical-align: top添加到CSS應修復它。 如：

div.logo, div.form { 
    display: inline-block;
    height: 200px;
    width: 200px;
    border: 1px dotted;
    vertical-align: top;
}

 div.logo, div.form { display: inline-block; height: 200px; width: 200px; border: 1px dotted; vertical-align:top; } 

 <div class="logo"> <input type="text"> </div> <div class="form"> </div>