Question

我想创建一个包含两列输入表单的页面。

例如左侧的texbox和右侧的复选框。

我怎么能这样做

#left
{
  float:left;


}

#right
{
float:right;
}

Answer 1

http://jsfiddle.net/kFcDE/7/

HTML：

<!-- HTML with text on left, and check boxes on right -->
<div>
  <form method="post" action="url/to/your/server/here">

    <!-- First float left -->
    <div class="float-left t-area-wrapper">
        <textarea name="text"></textarea>
    </div>

    <!-- Second float left -->
    <div class="float-left c-box-wrapper">
        <input type="checkbox" name="box1"></input>
        <input type="checkbox" name="box2"></input>
    </div>

    <!-- Clear - notice this is a sibling of the els with floats -->
    <div class="clear"></div>
  </form>
</div>


<!-- HTML with check boxes on LEFT, and text on RIGHT -->
<div>
  <form method="post" action="url/to/your/server/here">

    <!-- FIRST float left -->
    <div class="float-left c-box-wrapper">
        <input type="checkbox" name="box1"></input>
        <input type="checkbox" name="box2"></input>
    </div>


    <!-- SECOND float left -->
    <div class="float-left t-area-wrapper">
        <textarea name="text"></textarea>
    </div>

    <!-- Clear - notice this is a sibling of the els with floats -->
    <div class="clear"></div>
  </form>
</div>

CSS：

/* Use this class for borders/padding/etc to 
    position the text elements way you like */
.t-area-wrapper {

}

/* Use this class for borders/padding/etc to
   position the checkboxes the way you like */    
.c-box-wrapper {

}

.float-left {
    float: left;
}

.clear {
    clear: both;
}

当使用float ....时，不要忘记添加一个clear div作为浮动元素的最后一个兄弟....

Answer 2

两个div。一个风格：

.left_div_input_boxes {

width:50%;
float:left;

}

还有一个

.right_div_check_boxes {

    width:50%;
    float:right;

    }

http://jsfiddle.net/z7bQ6/

Answer 3

输入是内联元素，因此它们将并排保持，除非您插入中断或块级元素：

<input type="text" /><input type="checkbox"><br /><input type="text" /><input type="checkbox">

这将生成两列输入，无需样式化。

Answer 4

将每列（#left和#right）的宽度设置为49％。这将使他们每个占据屏幕的一半，中间有一点间距。（另外，如果两者都设置为50％，则可能会出现舍入问题，导致其中一列倒在另一列之下。

如何使用两个垂直输入列创建表单

4 个答案: