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

小提琴：http: //jsfiddle.net/praveenscience/xPmY2/

---

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

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

小提琴：http: //jsfiddle.net/praveenscience/xPmY2/1/

---

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

截屏