DIV/Form对齐

首先让我开始说我是NO开发人员。我更多地关注嵌入式内容。我完全不了解网页设计标准或常见做法。任何帮助非常感谢。DIV/Form对齐

我试图完成

为了使形式复选框/下拉菜单/文本框是令人难以置信的简单和直观操作的几行。它必须与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>

来源

2011-08-18 danieloi

我们能有一个链接到一个示例页面，或截图你有什么/你想达到什么目的？ – Bojangles

为什么你声明style =“position：relative”in-line而不是在CSS中与其余的样式？ – yoozer8

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

来源

2011-08-18 15:04:40 yoozer8

继承人你想做什么。总结左列形式在一个div这个类：

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

}

而与此类div的，右列：

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

    }

来源

2011-08-18 15:08:16

DIV/Form对齐

回答

相关问题