Html 如何对齐4个不同的表单元素

这是一个棘手的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">

这是小提琴

---

只是想说明一下，这是关于搜索框元素的高度。。。类似于易趣搜索框的东西我们要做的就是将表单的内容放在一个

div

中，然后使用

display:inline用于该分区！代码如下：

<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中的所有元素都将显示在一行中。而
选择
，
输入[type=“text”]
和
输入[type=“submit”]
都将在一行中

高度问题：

select
或
input
中的高度通过
填充：something添加您可以使用以下选项：

select, input[type="text"], input[type="submit"] {
padding: 10px;
}

这就是在那里所做的，注意：您不能在输入中使用
height
 这里有一个

这么多的方法，你想要什么？我建议
divs
（内联）这不是路线本身，而是高度。。。请参见fiddleYes示例。。。我注意到了这一点，但是元素（select vs input）并没有使用padding保持完全对齐，那么div的高度可能会有问题！当元素的高度值height大于div时，就会出现不对齐的问题！我不知道你在哪里失踪。请给我看一些代码。你可以，但在几个元素上使用相同的高度它不能正常工作。然后你可以使用类似的东西：
select{padding:10px；}input[type=“text”]{padding:5px}
类似的东西！这是一个很好的答案，遗憾的是，对于这样一个简单的任务，css仍然非常复杂。问候和感谢我尝试清理CSS；）我清理了一点CSS并更新了，只是为了让有同样问题的人明白解决方案。。。诀窍在于“清除”css属性。
.form {
display: inline;
}

select, input[type="text"], input[type="submit"] {
padding: 10px;
}

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