jquery - 在div中向下移动文本输入

我有一个div，里面有两个东西，一个标题和一个text类型的输入。对于标题，我制作了它的position relative，然后将其top设置为10%，这将其按我的预期向下移动。但是，当我尝试对输入框执行相同操作时，它并未向下移动，如下所示：



元素及其CSS都是使用jQuery创建的，因为这是游戏的用户脚本。这是代码的一部分：

   var prompt = document.createElement('h1');
   $(prompt).css({'color':'#E6E6FA', 'font-family':'Palatino Linotype', 'position':'relative', 'top':'10%'}).text('Enter your TagPro name');
   var nameField = document.createElement('input');
   $(nameField).attr({'id':'nameField', 'type':'text'}).css({'position':'relative','top':'60%','font-size':'20px'});
   $(nameDiv).append(prompt, nameField);

可以看到，两个元素的position都是relative，但是只有标题似乎向下移动。有人可以帮我理解为什么吗？

最佳答案

这是因为您的输入元素是一个内联元素。将display: block添加到其CSS。

$(nameField)
  .attr({'id':'nameField', 'type':'text'})
  .css({'display':'block','position':'relative','top':'60%','font-size':'20px'});

并请注意，position: relative表示您设置的top是相对于元素放置的位置，而不是相对于其容器的顶部边缘-如果您希望输入向下移动60％您需要将其包含的div更改为position: absolute。

关于jquery - 在div中向下移动文本输入，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38417670/