输入字段的边距不会从div顶部获得0px

Question

我在div中的表单中有一个输入字段(id："ordersearch")和一个按钮(id："searchbutton")。

问题是，尽管我尝试了，我似乎不能得到输入字段的上边距和按钮是0px。

查看此屏幕截图：enter image description here

我试过clearfix，但没有用。在div左边是另一个div，其中按钮的上边距被成功设置为0px。所以它看起来不像是对任何css的继承。它所应用的模板部分的代码如下(它是一个symfony2树枝模板)：

<div class="span-24 last topactions">
    <div class="span-16"><a href="{{ path('orders_new_empty') }}" class="fbutton button-success fbutton-inline fbutton-small">{{ 'order.new' | trans }}</a></div>
    <div class="span-7 last searchbox"><form action="{{ path('orders') }}" method="post"><input type="text" name="search" id="ordersearch" class="searchfield" placeholder="{{ 'searchplaceholder' | trans }}"><input class="fbutton fbutton-inline fbutton-small" type="submit" value="{{ 'search' | trans }}" id="searchbutton"></form></div>
    <div class="prepend-20 span-4 last filter textright">
        <select id="filter">
            <option value="all">{{ 'order.filter.all' | trans }}</option>
            <option value="orders" {% if 'orders' in filtername %}selected="selected"{% endif %}>{{ 'order.filter.orders' | trans }}</option>
            <option value="payed" {% if 'payed' in filtername %}selected="selected"{% endif %}>{{ 'order.filter.payedorders' | trans }}</option>
        </select>
    </div>
</div>

下面是模板这一部分的相关css。我已经设置了一些边框来查看边距的位置。这些边框最终将设置为零：

.topactions {
    display: block;
    margin-bottom: 25px;
    border: 1px solid #000000;
    padding: 0px;
}
.topactions .span-17 {
    margin-top: 0px;
    border: 1px solid #000000;
}
.searchbox {
    text-align: right;
    position: relative;
}
.searchbox form {
    /* margin-bottom: -6px; */ 
}
.searchbox .autocomplete-suggestions {
    right: 0px;
    width: auto !important;
    text-align: left;
}
.filter {
    margin-top: 3px
}
searchfield,
.searchfield {
    padding: 6px;
    border: 1px solid #ccc;
    width: 160px;
}
.last {
    margin-right: 0;
    padding-right: 0;
}
.span-7 {
    width: 270px;
    border: 1px solid #000000;
}
.span-16 {
    width: 630px;
    border: 1px solid #000000;
}
.span-24 {
    width: 950px;
    margin-right: 0;
}
#form .totoplink {
    float: right;
    margin-right: 100px;
}
#form .totopheader {
    margin-top: 40px
}
#form label {
    display: block;
    float: left;
    width: 230px;
    border-bottom: 1px solid #dddddd;
    height: 30px;
    margin-right: 15px;
    padding-top: 4px;
   }
#form .subfield label {
    width: 110px;
    border: none;
}
#form label.textarealabel {
    padding-bottom: 105px
}
#form input,
#formemail input {
    width: 300px;
    border: 1px solid #bbb;
    height: 23px;
    margin: 6px 0px;
    padding: 0px 4px;
    }
#form input[type="checkbox"] {
    height: 25px;
    width: auto;
}
#form div {
    /*position: relative; */ 
}
.fbutton {
    display: block;
    text-align: center;
    border: none;
    height: 40px;
    padding: 0 14px;
    font-size: 18px;
    line-height: 37px;
}
.fbutton i {
    line-height: 37px
}
.fbutton:active,
.fbutton:active i {
    line-height: 40px
}
.fbutton-inline {
    display: inline-block;
    vertical-align: middle;
}

非常感谢任何正确方向的指点！

Answer 1

尝试调整其中一项：

.fbutton {
    line-height: 37px;
}
.fbutton i {
    line-height: 37px
}
.fbutton:active,
.fbutton:active i {
    line-height: 40px
}
.fbutton-inline {
    vertical-align: middle; /* remove or add to textbox? */
}

如果你能在jsfiddle或类似的平台上设置它，也会很有帮助。

Answer 2

您只需添加以下内容即可达到所需的效果

.searchbox {
padding: 0;
}

#ordersearch {
border: none;
}

在你的风格的末尾。