Question

我使用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>

Answer 1

你可以围绕当前所有控件包装一个相对div。子控件将具有相对于新DIV的位置，而不再是该形式。

在此div之前添加菜单，应将菜单放在DIV（静态或相对）中。

<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>

PS：

您不能将style="top:81px; left: 89px; width: 119px; height: 20px;"用于正文
您必须为2个按钮指定position:才能使top和left生效。
换行div必须为relative。

从位置：绝对 - 现在我想在顶部添加一个菜单

1 个答案: