代码之家  ›  专栏  ›  技术社区  ›  Mawg says reinstate Monica

从与位置:绝对-现在我想在顶部添加菜单

css
  •  0
  • Mawg says reinstate Monica  · 技术社区  · 14 年前

    我使用Windows程序生成表单。它是wysiwg,在windows程序中设计,在浏览器中查看,所以我使用 style=position: absolute; left=X; top=Y;" 窗体上的每个元素。

    现在我发现我想在顶部添加一个菜单,有效地将表单向下推到菜单的高度。

    我应该调整一下吗 top=Y 生成表单时?或者,我可以将一个DIV环绕在菜单或窗体上,并以某种方式保持窗体控件相对于窗体开头的位置吗?

    这是一个非常简单的例子;我的IRL形式更加复杂。

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
      <title>Input data</title>
      <meta http-equiv="Content-type" content="text/html;charset=UTF-8">
      <meta HTTP-EQUIV="Pragma" CONTENT="no-cache">
      <meta HTTP-EQUIV="Expires" CONTENT="-1">
      <link type="text/css" rel="stylesheet" href="css/user.css">
    </head>
    
    <body style="position:relative; top=0px; left=0px;">
    <form action="HTTP://localhost/a/submitted.php" method="post">
    
      <input type="text" name="text_input_box_2" style="top:81px; left: 89px; width: 119px; height: 20px;"class="text_iput">
    
      <input type="text" name="text_input_box_1" style="top:41px; left: 89px; width: 119px; height: 20px;"class="text_iput">
    
    <div class="submit_button" style="position:absolute; top:127px; left:148px;"><input type="submit" name="submitButton" value="Submit"></div>
    </form>
    </body>
    </html>
    
    1 回复  |  直到 14 年前
        1
  •  1
  •   Yi Jiang G-Man    14 年前

    <body>
     <form action="HTTP://localhost/a/submitted.php" method="post">
        <div id="menu">menu</div>
        <div id="wrap-div" style="position:relative">
          <!--current code from here -->
          <input type="text" name="text_input_box_2" style="top:81px; left: 89px; width: 119px; height: 20px;"class="text_iput">
          <input type="text" name="text_input_box_1" style="top:41px; left: 89px; width: 119px; height: 20px;"class="text_iput">
          <div class="submit_button" style="position:absolute; top:127px; left:148px;"><input type="submit" name="submitButton" value="Submit"></div>
       </div>
    </form>
    </body>
    

    1. style="top:81px; left: 89px; width: 119px; height: 20px;"
    2. position: top left
    3. relative