w3.css
犯規目前支持 「輸入組」 S。我使用術語輸入組,因爲這是Twitter Bootstrap用於指您要查找的術語。我們可以做的是檢查Bootstrap input-group
代碼,並擴展w3.css
的代碼以包含類似前綴的版本。不幸的是,w3.css
已經使用類w3-input-group
,所以我們將使用w3-inline-input-group
。
HTML
<div class="w3-row w3-section">
<div class="w3-col s7">
<label><b>Apple</b></label>
</div>
<div class="w3-col s5 w3-inline-input-group">
<i id="plus" class="fa fa-plus w3-input-group-addon"></i>
<input id="noOfApple" class="w3-input w3-border-0" type="text" name="noOfApple" value="1" size="3">
<i id="minus" class="fa fa-minus w3-input-group-addon"></i>
</div>
</div>
CSS
.w3-inline-input-group {
position: relative;
display: table;
border-collapse: separate;
}
.w3-inline-input-group .w3-input {
position: relative;
z-index: 2;
float: left;
width: 100%;
margin-bottom: 0;
}
.w3-inline-input-group .w3-input:focus {
z-index: 3;
}
.w3-input-group-addon,
.w3-inline-input-group .w3-input {
display: table-cell;
}
.w3-input-group-addon
{
width: 1%;
white-space: nowrap;
vertical-align: middle;
}
.w3-input-group-addon {
font-size: 24px;
font-weight: normal;
line-height: 1;
text-align: center;
}
JSFIDDLE
注意:的jsfiddle犯規允許列入非HTTPS外部文件,所以請滾動到Css窗格的底部以查找新/上述css
PS。如果你的項目沒有太多,並且你將會使用form
元素很多,我會強烈建議尋找Twitter Bootstrap CSS框架(您可以自定義導出庫,以排除所有JS,如果你想構建自己的所有東西,但是他們有很多非常有用的開箱即用代碼,我會推薦它們)。這是一個很好的開始,並且更廣泛地使用w3.css(至少在作業方面要求瞭解它)
使用'display:inline-block' –
你能否提供一個工作示例 –
它的運行良好http://codepen.io/shivk/pen/apmEMr..then你想要什麼? –