1

我今天正在做我的第一段 HTML 和 CSS，我在尝试移动div. 我阅读了一些关于 CSS 的教程，并尝试复制我所看到的内容。但由于某种原因，我无法div移动。

任何人都可以直接告诉我我做错了什么吗？

CSS

#seax {
  position:static;
  top:400;
  left:400;
}

HTML

<div id="seax">
  <form autocomplete="off" method="post" action="/search.html">
    <table>
      <tbody>
        <tr>
          <td>Search:</td>
          <td>&nbsp;
            <input type="text" size="40" name="for" class="ui-autocomplete-input" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true">
             &nbsp;&nbsp; 
          </td>
          <td>
            <input type="hidden" name="brand" value="0">
            <input type="image" src="/user/templates/custom/search.gif" value="Go" alt="Go" style="padding: 0px">
          </td>
        </tr>
      </tbody>
    </table>
  </form>
</div>
4

5 回答 5

2

更改position:static;为position:relative;。静态位置将 div 显示在它的默认位置，就像它在您看到的文档流中出现的那样。

于 2013-03-30T18:10:21.880 回答
1

给div一个position_absolute

#seax {
  position: absolute;
  top:400;
  left:400;
}
于 2013-03-30T18:17:11.747 回答
1

将“px”添加到您的 CSS，并使用绝对

#seax {
position:absolute;
top:100px;
left:100px;
}

http://jsfiddle.net/djwave28/tnvQz/

于 2013-03-30T18:21:30.280 回答
1

这实际上取决于您要如何定位 div。

position: static;绝对是您的问题，因为静态位置（如@Omega 所述）在其默认位置显示 div 。你的意思是写要么position: absolute要么position: relative。两者之间的区别在这里得到了最好的概述，但我会给你一个 tl;dr。

position: absolute相对于整个页面定位 div，而position: relative相对于父级定位它。

此外，您在和属性值（即和）px的末尾缺少toplefttop:10px;left:10px;

于 2013-03-30T18:21:42.817 回答
0

尝试改变

<div id="seax"></div>

至

<div class="seax"></div>

和

#seax {
position:static;
top:400;
left:400;
 }

至

.seax {
 position:absolute;
 top:400px;
 left:400px;
}

如果要seax用于多个元素。

你甚至可以尝试：

<form autocomplete="off" method="post" action="/search.html">
  <div class="seax">
    <table>
      <tbody>
        <tr>
          <td>Search:</td>
          <td>&nbsp;
            <input type="text" size="40" name="for" class="ui-autocomplete-input" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true">
             &nbsp;&nbsp; 
          </td>
          <td>
            <input type="hidden" name="brand" value="0">
            <input type="image" src="/user/templates/custom/search.gif" value="Go" alt="Go" style="padding: 0px">
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</form>

那应该解决它。否则，您的 HTML 文档应如下所示：

<!DOCTYPE html>
<html>
  <head>
  <title>Page Title</title>
  </head>
  <style>
   .seax {
    position:absolute;
    top:400px;
    left:400px;
    }
</style>
<body>

<div class="seax">
 <form autocomplete="off" method="post" action="/search.html">
  <table>
    <tbody>
     <tr>
      <td>Search:</td>
       <td>&nbsp;
        <input type="text" size="40" name="for" class="ui-
autocomplete-input" autocomplete="off" role="textbox" aria-
autocomplete="list" aria-haspopup="true">
         &nbsp;&nbsp; 
        </td>
        <td>
        <input type="hidden" name="brand" value="0">
        <input type="image" src="/user/templates/custom/search.gif" 
   value="Go" alt="Go" style="padding: 0px">
         </td>
        </tr>
      </tbody>
     </table>
   </form>
 </div>

</body>
</html>
于 2017-04-20T02:34:48.880 回答