javascript - HTML 框格式

Question

所以我有这段 JavaScript 代码，每次单击按钮时都会创建两个新的输入字段，现在它们显示得有点有趣。我在下面附上了一张图片。代码也在下面。我希望名称字段与较大框的顶部对齐显示，有什么方法可以做到这一点吗？

var div = document.createElement("div");
div.innerHTML = "<b>Checkpoint " + markerId + ":</b> <input type='text' id=" + markerId + " placeholder='Checkpoint name'> <textarea rows='5' cols='40' id=" + markerId + "desc> Checkpoint description </textarea> <button type='submit' value='Remove' onClick='remove_checkpoint();' /> <br />";
document.getElementById("divForms").appendChild(div);

谢谢!

Answer 1

是的。您可以这样做:

在 CSS 中:

textarea {vertical-align: top;}

fiddle :http://jsfiddle.net/praveenscience/xPmY2/

<小时/>

或者，如果您不喜欢使用 CSS，请以这种方式内联样式:

<textarea style="vertical-align: top;">Checkpoint description</textarea>

fiddle :http://jsfiddle.net/praveenscience/xPmY2/1/

<小时/>

但我建议您使用 CSS 版本，因为内联样式很笨拙。

屏幕截图