Question

我不确定如何将以下主要div放在100％宽度的页面中心，或者至少向左浮动，我该怎么做？

<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>

Answer 1

这是你想要的吗？我添加了另一个div来包装表单元素：

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

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

Answer 2

这个怎么样......

    .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/

Answer 3

这是否能实现您的目标？

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

}

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

尝试居中或浮动100％宽度的包装div

3 个答案: