試圖以100％寬度居中或浮動包裝div

我不知道如何獲得以下主要div以100％寬度爲中心的頁面或甚至至少浮動到左側，我該如何做到這一點？試圖以100％寬度居中或浮動包裝div

<div class="addInput"><div sytle="clear:both"></div>   
    <input class="input" type="text" name="func_name"/> 
     <b class="addText">Name of Function: </b> 
</div>  

<div class="addInput"> 
    <input class="input" type="text" name="func_location"/> 
     <b class="addText">Location: </b> 
</div> 

<div class="addInput"> 
    <input class="input" type="text" name="func_date"/> 
     <b class="addText">Date: </b> 
</div>  

<div class="addInput"> 
    <input class="input" type="text" name="func_timein"/> 
     <b class="addText">Time In: </b> 
</div>  

<div class="addInput"> 
    <input class="input" type="text" name="func_timeout"/> 
     <b class="addText">Time Out: </b> 
</div>  

<div class="addInput"> 
    <input class="input" type="text" name="AECap"/> 
     <b class="addText">Adult Ed Pos.: </b> 
</div>   

<div class="addInput"> 
    <input class="input" type="text" name="SCCap"/> 
     <b class="addText">Cook Pos.: </b> 
</div>   

<div class="addInput"> 
    <input class="input" type="text" name="WSCap"/> 
     <b class="addText">Wait Staff Pos.: </b> 
</div>   

<div class="addInput"> 
    <input class="input" type="text" name="JTCap"/> 
     <b class="addText">Jr. Training Pos.: </b> 
</div>

來源

2014-01-18 codingManiac

如果其寬度爲100％，那麼水平對齊是不相關的;左，右和中心都將完全相同。你的意思是你想要將div的內容與中心對齊嗎？ –

我希望每個輸入字段和相應的文本放在一個新行上，我希望它擴大到100％的屏幕，但不幸的是，由於我的輸入框寬度爲100％，文本一直下降到下一行。 – codingManiac

這個怎麼樣...

.input 
{ 
    height:30px; 
    float:right; 
    box-shadow:inset 0 1px 6px #000000; 
    width:85%; 
} 

.addInput { 
    float:left; 
    width:100%; 
} 

.addText { 
    line-height:30px; 
    height:30px; 
    float:left; 
}

http://jsfiddle.net/bowenac/gsN93/

來源

2014-01-18 00:45:07 Bowenac

這樣比較好，我猜想我只需要減少手機輸入框的百分比大小。 – codingManiac

如果你在輸入上面添加b文本，你可以將它們都浮在左邊。然後，您可以創建兩個單獨的媒體查詢，一個用於桌面資源和移動資源，並更改每個用戶的CSS寬度。 – Bowenac

下面是一個例子，不知道它在jsfiddle中的工作情況如何，但應該適用於手機等，你會明白。 http://jsfiddle.net/bowenac/gsN93/1/ – Bowenac

這是你想要的嗎？我添加了另一個div來環繞表單元素：

<div style="margin:0 auto; width:450px;">

http://jsfiddle.net/d36TC/4/

來源

2014-01-18 00:38:56 optimus203

Eh ，我真的希望它是動態的，我更新了jsfiddle代碼，它顯示了文本如何在每個div內下降，但我希望文本位於每個輸入框的左側，並且我希望每個'addInput'div都跨越瀏覽器100％。 – codingManiac

像這樣？ http://jsfiddle.net/d36TC/18/ – optimus203

這是否完成你在找什麼？

.addText { 
width: 13%; 
line-height:30px; 
height:30px; 
float: left; 
margin: 0 1% 0 0;

}

http://jsfiddle.net/dustinhorn/Kf89p/

來源

2014-01-18 01:14:33 dustinhorn

試圖以100％寬度居中或浮動包裝div

回答

相關問題