W3.css如何在一行中創建？

我有幾個元素，2 i和1 input。我從名爲w3.css的框架中使用w3-col的佈局以及名爲FontAwesome的字體圖標庫。由於s7 + s5 = s12，爲什麼我的元素仍然下降到新行？預期的div s5中的3個元素應位於同一行。希望你們能幫助我解決這個問題。W3.css如何在一行中創建？

<div class="w3-row w3-section"> 
    <div class="w3-col s7"> 
     <label><b>Apple</b></label> 
    </div> 
    <div class="w3-col s5"> 
     <i id="plus" class="fa fa-plus" style="font-size:24px"></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" style="font-size:24px"></i> 
    </div> 
</div>

來源

2017-01-16 HenryLoke

使用'display：inline-block' –

你能否提供一個工作示例 –

它的運行良好http://codepen.io/shivk/pen/apmEMr..then你想要什麼？ –

你寫的標記是正確的。您自己的代碼可能是覆蓋s7和s5類屬性float: left;

如果您發現它正在覆蓋，請更正此問題。

而且添加該樣式輸入組件

`.s5 { 
    position: relative; 

} 

.s5 input { 
    padding: 8px 15px; 
} 
.s5 i { 
    z-index: 1; 
} 
.s5 #plus { 
    position: absolute; 
    left: 0; 
    top: 5px 
} 
.s5 #minus { 
    position: absolute; 
    right: 0; 
    top: 8px 
}`

這裏是你的代碼的活生生的例子:)

http://codepen.io/kaushik/pen/JERMwg

來源

2017-01-16 07:15:04

您不包括OP使用http：// codepen的FontAwesome庫。io/anon/pen/VPKyOe – haxxxton

@haxxxton是的！當你運行代碼時，你會注意到輸入並拖放到新行。那是我的意思。 – HenryLoke

你需要在CSS文件中爲這個組件添加下面樣式的風格。 S5 { 位置：相對; } .s5輸入{ 填充：8像素15像素; } .s5 i { z-index：1; } .s5 #plus { position：absolute; left：0; top：5px } .s5 #minus { position：absolute; right：0; top：8px } 現在看到codepen代碼可能就是你想要的。 http://codepen.io/kaushik/pen/JERMwg?editors=0110 –

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（至少在作業方面要求瞭解它）

來源

2017-01-16 07:35:52 haxxxton

W3.css如何在一行中創建？

回答

相關問題