輸入字段的邊距將不會從div頂部獲得0px

我有一個div格式的輸入字段（id：「ordersearch」）和一個按鈕（id：「searchbutton」）。輸入字段的邊距將不會從div頂部獲得0px

問題是，儘管嘗試，我似乎無法獲得輸入字段的頂部邊距和按鈕爲0px。

我試過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; 
}

在正確的方向的任何指針是極大的讚賞！

來源

2015-11-15 Geerten

我沒有看到任何保證金在您的文本輸入http://jsfiddle.net/dj3fp15s/ – Turnip

太多的代碼。這個CSS的一半顯然與你所問的問題無關（在你傾銷的代碼中有一些與顏色，轉換和字體有關的東西）。我們期望在這裏的調試問題中使用*最少*可重現的例子;請嘗試將您的代碼縮小到*最短的代碼片段，以說明您的問題。 –

@Sexy蘿蔔，沒有理由，他們沒有幫助解決這個問題，所以我沒有把它們放在我的代碼中。 – Geerten

嘗試調整其中之一：

.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或相似。

來源

2015-11-16 11:05:11 wazz

您可以通過簡單地在您的樣式末尾添加

.searchbox { 
padding: 0; 
} 

#ordersearch { 
border: none; 
}

實現你正在尋找的效果。

來源

2015-11-16 11:13:55 Rounin

輸入字段的邊距將不會從div頂部獲得0px

回答

相關問題