0

这是棘手的 css 事情之一

我在导航栏中有 4 个元素，我想将其中的 3 个元素加入一个漂亮的搜索框。这个想法是让所有搜索框都具有相同的高度、对齐方式和脸颊。另一方面，链接必须适当定位。

我已经尝试了这一切，我可以让它为一个导航器工作，但不能为其中两个导航器工作，这是不行的。

这是html示例：

<a href="#" id="btn-category">Comprar por Categoría ▼&lt;/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 搜索框

4

2 回答 2

1

我们要做的就是将表单的内容放在一个中div，然后display: inline;用于该 div！这是代码：

<div class="form">
<a href="#" id="btn-category">Comprar por Categoría ▼&lt;/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在输入中使用！

于 2013-09-11T16:24:10.783 回答
1

这是一个小提琴

#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;
}
于 2013-09-11T16:40:45.947 回答