div和表格在同一行

它是在同一行，但形式有不同的高度... 任何想法？div和表格在同一行

代碼：

<div id="link-social"> 
<form class="search" method="post" action=""> 
    <input id="search-box" type="text"> 
</form> 
<a href="http://instagram.com/" class="instagram"></a> 
<a href="http://facebook.com/" class="facebook"></a> 
</div> 

#link-social { 
    background:url(img/wbg.png) repeat; 
    width:388px; 
    height:56px; 
    float:left; 
    text-align:left; 
    display: inline-block; 
} 

.search { 
    display: inline; 
} 

.facebook { 
background-image: url('img/facebook.png'); 
width:29px; 
height:29px; 
display: inline-block; 
} 

.instagram { 
background-image: url('img/instagram.png'); 
width:29px; 
height:29px; 
display: inline-block; 
}

來源

2013-08-12 David Rose

一個'form'默認有利潤，就是你所看到的？ – MrWhite

其實，你的代碼中沒有什麼會提示它們應該是相同的高度？（我假設你認爲他們應該，或者這只是你正在努力實現的目標？）你正在設置包含'div'的高度，但是允許'form'到_flow_？ – MrWhite

您可以使用#link-social *{display: inline-block;}或者乾脆你應該改變使用inline-block的內嵌在你的.search。

好東西，你可以顯示你的所有元素爲table-cell並將其對齊。

來源

2013-08-12 08:35:35

使用復位類CSS

在這種情況下，使用

form { 
margin:0; 
padding:0; 
}

來源

2013-08-12 08:36:10

儘量把圖標在不同的div標籤，並在申報單或類似Twitter的引導或任何柱框架使用float屬性純（http://purecss.io/）！

檢查小提琴： http://jsfiddle.net/z8ENB/

<div id="field"> 
<form class="search" method="post" action=""> 
    <input id="search-box" type="text"> 
</form> 
</div> 
<div id="link-social"> 
<a href="http://instagram.com/" class="instagram"></a> 
<a href="http://facebook.com/" class="facebook"></a> 
</div> 

div { 
    margin-right: 5px; 
    float:left; 
}

來源

2013-08-12 08:37:25

MNAKE本

DEMO

.search { 
    float:left; 
    line-height:29px; 

}

來源

2013-08-12 08:38:47 falguni

display: block; 因爲display: inline;其高度和寬度取決於讓你的形式內容下面是解 Here is the solution

來源

2013-08-12 08:46:54

嘗試下面的CSS：

.search { 
    top: -10px; 
    position: relative; 
    display:inline; 
}

來源

2013-08-12 09:00:41 extremeFE

div和表格在同一行

回答

相關問題