Question

我有1 form，我想将其放在2 div s中，以便以下内容：

<div style="float:left; position:relative; margin-right:40px">
<form id="testForm2">
</form>
</div>

<div position:relative">
<form id="testForm2">
</form>
</div>

会变成这样的东西：

<div style="float:left; position:relative; margin-right:40px">
<form id="testForm2">
</div>

<div position:relative">
</form>
</div>

请参阅fiddle。有什么想法吗？

谢谢！

Answer 1

你想要的是将表格放在两个div周围：

<form id="testForm2">
  <div style="float:left; position:relative; margin-right:40px">
  </div>

  <div style="position:relative">
  </div>
</form>

Here's jsFiddle的更新版本。

修改
另外，你的第二个div的风格是不正确的。现在已经修复了我的例子。

Answer 2

jsFiddle文件中的标记需要一些整理。这就是我想要的，试图在某种程度上最小化你的代码：

<div class="post_edit_modeling">
    <div class="tab_trash">
        <div id="prof_picture">
            <form id="testForm2">
                <fieldset id="left">
                    <legend>Sex:</legend>
                    <div>
                        <label>
                            <input type="radio" name="sex" id="genderMale" value="male" />
                            Male
                        </label>
                    </div>
                    <div>
                        <label>
                            <input type="radio" name="sex" id="genderFemale" value="female" />
                            Female
                        </label>
                    </div>
                    <div>
                        <label>Weight</label>
                        <input id="weightpounds" type="text" name="weightpounds"/>
                    </div>
                    <div>
                        <label>Bust</label>
                        <input id="bust" type="text" name="bust"/>
                    </div>
                </fieldset>
                <fieldset id="right">
                    <div>
                        <label>Cup</label>
                        <input id="cup" type="text" name="cup"/>
                    </div>
                    <div>
                        <label>Waist</label>
                        <input id="waist" type="text" name="waist"/>
                    </div>
                    <div>
                        <label>Hips</label>
                        <input id="hips" type="text" name="hips"/>
                    </div>
                    <div>
                        <label>Hair Color</label>
                        <select name="haircolor">
                            <option value="1">White</option>
                            <option value="2">Black</option>
                            <option value="3">Yellow</option>
                            <option value="4">Blue</option>
                        </select>
                    </div>
                    <div>
                        <label>Dress Size</label>
                        <input id="dress" type="text" name="dress"/>
                    </div>
                </fieldset>
                <fieldset>
                    <div>
                        <input type="button" name="btnUpdate" id="btnUpdate"  value="Update" />
                    </div>
                </fieldset>
            </form>
        </div>
    </div>
</div>

CSS：

form div {float: left; margin-bottom: 15px;}
fieldset { float: left; width: 200px; border: 0; padding: 0; margin: 0;}
#left { }
#right { margin-right: 0; }
label {float: left;}
input {clear: both;; float: left}

我已经更新了你的jsFiddle文件。 Here

Answer 3

你能不能让两个div在表格内生活？像这样：

<form id="testForm2">
    <div style="float:left; position:relative; margin-right:40px">
      Form Content Here
    </div>

    <div position:relative">
      Form Content Here
    </div>
</form>

如果表单影响您的页面布局，请确保将表单样式设置为display:inline;！

Answer 4

正如Drackir和joe_coolish所说，你不需要以这种方式嵌套你的表格标签。

通常，我总是使用表单标记打开整个内容块，与其他内容完全隔离。以这种方式做事绝对没有害处。包含<h1>和整个布局在内的任何内容都可以嵌套在表单中，只要您知道其中的每个输入都属于该表单。

<form>
<!-- tons of content here including layout -->
</form>

Answer 5

难道你不能只将2 DIV放在FORM标签内吗？类似的东西：

<form>
<div id="one">
    ...
</div>
<div id="two">

</div>
</form>

编辑：好像我有点太晚了：）

Answer 6

只需在<div> ...

中移动<form>代码即可

<form id="testForm2">
    <div style="float:left; position:relative; margin-right:40px">
        ... left side ...
    </div> 
    <div position:relative">
        ... right side ...
    </div>
</form>

Answer 7

怎么样

<form id="testForm2">
    <div style="float:left; position:relative; margin-right:40px">        
    </div>

    <div position:relative">
    </div>
</form>

HTML如何将表单放在2个div /列中？

7 个答案: