使用float:left横向排列div失败，求解惑

Question

使用float:left横向排列div失败，求解惑

发布于
2018-04-10

<div style="width: 600px;">
                      <div id="update_1" style="float:left;width: 100px;" ><input type="button" name="Submit2" value="确认提交" onCLick="checkForm()"></div>
                     <div style="float:left;width: 100px;"><input type="button" name="Submit3" value="取消" onClick="javascript:window.location.replace('../blank.html');"></div>
                     <div style="float:left;width: 100px;"><input type="reset" name="Reset" value="重置"></div>
                  </div>

如上，把内部的三个div进行横向排列，效果任然是垂直的
不知道哪里不对，求解

完整代码见下面

<%@ page language="java" import="java.util.*,java.text.SimpleDateFormat" pageEncoding="UTF-8"%>
<html>
<%
    String contextPath = request.getContextPath();
%>
<script>

  function checkForm() {
     
   if (employAddForm.EmployName.value == "") {
    alert ("用户名不能为空");
    document.employAddForm.EmployName.focus();
    return false;
      }
    
   if (employAddForm.EmployRealName.value == "") {
    alert ("真实姓名不能为空");
    document.employAddForm.EmployRealName.focus();
    return false;
      }
       if (employAddForm.EmployPWD.value == "") {
    alert ("密码不能为空");
    document.employAddForm.EmployPWD.focus();
    return false;
      }
      
      if (employAddForm.EmployPWD.value != employAddForm.EmployPWD2.value) {
    alert ("2次密码必须相同");
    document.employAddForm.EmployName.focus();
    return false;
      }
      
  //    if (document.employAddForm.EmployMPhone.value.length!=11) {
    //        alert("电话号码是11位！");
    //        document.employAddForm.EmployMPhone.focus();
    //        return false;
    //    }
      document.employAddForm.action = "<%=request.getContextPath() %>/EmployAction";
    document.employAddForm.submit();
    
}
</script>

<head>
        <meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb2312">
        <style type="text/css">
<!--
.style1 {font-size: 16px}
-->
        </style>
    </head>
    <body  topmargin="0" leftmargin="0">
     <div align="center"><font color=#FF0000>${requestScope.msg } </font></div>
    <form name="employAddForm" method="post" action="<%=request.getContextPath() %>/EmployAddAction">
          <p>&nbsp;</p>
          <p>&nbsp;</p><div align="center"><font color=#000000>添加人员</font></div>         
          <p>&nbsp;</p>
          <table width="800" border="0" align="center">
            <tr>
            
              <td width="83"><span class="style1">用户名：</span></td>
              <td width="323"><span class="style1">
                <input type="text" name="EmployName">
              
              </span><br><span name="div41" id="div41"></span></td>
              <td width="85"><span class="style1">真实姓名：</span></td>
              <td width="291"><span class="style1">
                <input type="text" name="EmployRealName">
              </span></td>
            </tr>
            <tr>
              <td><span class="style1">密码：</span></td>
              <td><span class="style1">
                <input type="password" name="EmployPWD" >
              </span></td>
              <td><span class="style1">性 别：</span></td>
              <td><span class="style1">
                <label>
                      <input type="radio" name="EmploySex" value="男" checked>男
                </label>
              <label> 
                       <input type="radio" name="EmploySex" value="女"> 女
              </label>
              <label></label>
              </span></td>
            </tr>
            <tr>
               <td><span class="style1">重复密码：</span></td>
              <td><span class="style1">
                <input type="password" name="EmployPWD2" >
              </span></td>
              
              <td><span class="style1">用户级别：</span></td>
              <td><span class="style1">
                <select name="EmployClass">
                  <option value="0">0级-总经理</option>
                  <option value="1">1级-管理员</option>
                  <option value="2" selected>2级-普通员工</option>
                </select>
              </span></td>
            </tr>
            <tr>
                <tr>
              <td><span class="style1">身份证号：</span></td>
              <td><span class="style1">
                <input type="text" name="EmployIDNum">
              </span></td>
              
              <td><span class="style1">联系电话：</span></td>
              <td><span class="style1">
                <input type="text" name="EmployMPhone">
              </span></td>
              </tr>
            <tr>
              <td><span class="style1"> 家庭住址：</span></td>
              <td colspan="3"><span class="style1">
                <input name="EmployAddress" type="text" value="黑龙江哈尔滨松北区">
              </span></td>
              
            </tr>
            <tr>
              <td><span class="style1"></span></td>
              <td colspan="3"><div align="center">
                  <div style="width: 600px;">
                      <div id="update_1" style="float:left;width: 100px;" ><input type="button" name="Submit2" value="确认提交" onCLick="checkForm()"></div>
                     <div style="float:left;width: 100px;"><input type="button" name="Submit3" value="取消" onClick="javascript:window.location.replace('../blank.html');"></div>
                     <div style="float:left;width: 100px;"><input type="reset" name="Reset" value="重置"></div>
                  </div>
                     
                <% 
                SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
                   String date = sdf.format(new Date());
                 %>
                <input type="hidden" name="EmployDate" value="<%=date%>">
                <p class="style1">
                    </p>
              </div></td>
            </tr>
          </table>
          <p>&nbsp;</p>
          <p>&nbsp; </p>
    </form>
    <iframe name="iframe1"  id="iframe1" width="0" height="0" scrolling=auto >
    </iframe>
    </body>
</html>

java css

阅读 2.5k

1 个回答

在我这边是横向排列的

撰写回答