试图以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

回答

相关问题