Question

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

代码：

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

Answer 1

制作表单display: block; 因为display: inline;它的高度和宽度取决于其内容这是解决方案 Here is the solution

Answer 2

您可以使用#link-social *{display: inline-block;}，或者只是应该在.search中使用内联块更改内联。

您可以将所有元素显示为table-cell并将其对齐中间。

Answer 3

使用CSS的重置类

在这种情况下，请使用

form {  
margin:0;  
padding:0;  
}

Answer 4

尝试将图标放在不同的div标签中，并在div或任何列框架上使用float属性，如twitter bootstrap或pure（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;
}

Answer 5

MNAKE THIS

<强> DEMO

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

}

Answer 6

尝试以下css：

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

div和form在同一行

6 个答案: