2

它在同一行，但表格的高度不同……知道吗？

代码：

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

6 回答 6

2

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

于 2013-08-12T08:46:54.603 回答
0

您可以使用#link-social *{display: inline-block;}或简单地使用 inline-block 在您的.search.

table-cell您可以将所有元素显示为并将其居中对齐，这是一件好事。

于 2013-08-12T08:35:35.260 回答
0

为 CSS 使用重置类

在这种情况下，使用

form {  
margin:0;  
padding:0;  
}
于 2013-08-12T08:36:10.770 回答
0

尝试将图标放在不同的 div 标签中，并在 div 或任何列框架（如 twitter bootstrap 或 pure（http://purecss.io/））上使用 float 属性！

检查那个小提琴：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-12T08:37:25.827 回答
0

做这个

演示

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

}
于 2013-08-12T08:38:47.377 回答
0

试试下面的css：

.search {
    top: -10px;
    position: relative;
    display:inline;
}
于 2013-08-12T09:00:41.780 回答