这是棘手的CSS事之一
我在导航栏中有4个元素,我希望将它们中的3个连接到一个漂亮的搜索框中。我们的想法是让所有的搜索框具有相同的高度,对齐和面颊。另一方面,链接必须适当定位。
我已经尝试了所有这些,我可以让它适用于一个导航器但不适用于其中两个,这是不行的。
这是html示例:
<a href="#" id="btn-category">Comprar por Categoría ▼</a>
<select>
<option>a</option>
<option>b</option>
</select>
<input type="text">
<input type="submit">
和基础css:
#btn-category{
font-size: 8pt;
display: inline-block;
width: 80px;
}
input, select{
border: 1px solid #ccc;
padding: 5px;
font-size: 10pt;
height: 30px;
}
select{
font-size: 8pt;
}
这是小提琴http://jsfiddle.net/Q7Ge4/1/
只是为了说清楚,它是关于搜索框元素的高度 ......就像ebay搜索框
答案 0 :(得分:1)
我们要做的就是将表单内容放在一个div
中,然后使用display: inline;
表示该div!这是代码:
<div class="form">
<a href="#" id="btn-category">Comprar por Categoría ▼</a>
<select>
<option>a</option>
<option>b</option>
</select>
<input type="text">
<input type="submit">
</div>
这里的技巧是将div中的元素显示在一行中!作为小提琴中的一个。它将使用以下代码完成:
.form {
display: inline;
}
就是这样!这样,div中的所有元素都将显示在一行中。 select
,input[type="text"]
和input[type="submit"]
都在一行中!
身高:
select
或input
中的高度内容是通过padding: something;
添加的,您可以使用此内容:
select, input[type="text"], input[type="submit"] {
padding: 10px;
}
这是在那里完成的,注意:你不能在输入中使用height
!
答案 1 :(得分:1)
这是Fiddle
#btn-category {
float: left;
clear: left;
font-size: 11px;
width: 70px;
height: 30px;
}
input:focus,
select:focus {
outline: none;
border: 1px solid #12b6f3;
box-shadow: 0 0 2px 0 #12b6f3;
}
select,
input {
float: left;
clear: none;
padding: 5px;
margin-right: 8px;
font-size: 12px;
border: 1px solid #ccc;
border-radius: 3px;
}
select {
height: 30px;
font-size: 8pt;
}
input[type="text"] {
height: 18px;
width: 150px;
transition: width 0.4s linear;
}
input[type="text"]:focus {
width: 200px;
}
input[type="submit"] {
width: 70px;
height: 30px;
}