Question

首先让我先说我不是网络开发人员。我更多地研究嵌入式的东西。我完全不了解网页设计标准或常见做法。任何帮助都非常感激。

我想要实现的目标

制作一个包含多行复选框/下拉列表/文本框的表单，操作非常简单直观。它必须与IE 6+完全兼容。任何其他浏览器都不是强制性的（这是只能在IE上查看的内部解决方案）。

我一直试图完成的是创建另一列复选框，这些复选框与当前集合对齐。

这是IE目前的样子

我的代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<style type="text/css">
.right_div_check_boxes { width:70%;float:right;} <!-- 75% -->
.left_div_input_boxes {width:15%;float:left;}    <!--15%-->

</style>




<div class="left_div_input_boxes" style="position:relative">

    <form>
    <label>Submitted by (First Name)</label>
    <input type="text" style="width:150px" name="firstname" /><br>
    <label>Submitted by (Last Name)</label><br>
    <input type="text" name="lastname"/>
    <label>Employee Number</label><br>
    <input type="text" name="employnum"/>


    <form>
    <label>What</label>
    <select style="width:150px" name="observer">
    <option value="other">TEST</option>
    <option value="other">TEST</option>
    <option value="other">TEST</option>
    </select>


    <label>Who</label>
    <form action="">
    <select style="width:150px" name="who">
    <option value="other">TEST</option>
    <option value="other">TEST</option>
    <option value="other">TEST</option>
    </select>




    <label>Operation Code</label>
    <select  style="width:150px"  name="opcode">
                       <option value="other">TEST</option>
                       <option value="other">TEST</option>
                    </select>



                    <label>Center</label>
                    <select style="width:150px" name="cost">

                        <option value="Zone 1"> Zone 1 </option>
                        <option value="Zone 2"> Zone 2 </option>
                        <option value="Zone 3"> Zone 3 </option>
                    </select>
                    </form>

</div>


<div class="right_div_check_boxes" style="position:relative">
<label>Dangers</label>
<form>

<input type="checkbox" name="vehicle" value="Bike" />Line of Fire<br />
<input type="checkbox" name="vehicle" value="Car" />Respirtory Protection<br />
<input type="checkbox" name="vehicle" value="Car" />Ears/Hearing Protection<br />
<input type="checkbox" name="vehicle" value="Car" />Eye/Face Protection<br />
</div>
<br />



</head>
<body>

</body>
</html>

Answer 1

使用表而不是div。如果您需要添加更多行，那么至少就像在此上下文中添加更多行一样简单。添加另一列复选框也很简单。只需在表格中添加另一列。

Answer 2

继承人你想做什么。使用此类将左列形式包装在div中：

.left_column {
float:left;
width:50%;

}

右栏中带有此类的div：

 .right_column {
    float:right;
    width:50%;

    }

DIV /表格对齐

2 个答案: