文章/答案/技术大牛

发布

社区首页 >问答首页 >使用HTML将一个HTML输入放在另一个HTML输入的正下方

问使用HTML将一个HTML输入放在另一个HTML输入的正下方
EN

Stack Overflow用户

提问于 2013-04-30 05:11:48

回答 1查看 334关注 0票数 0

所以我有一堆动态创建的HTML元素。我真的希望元素"imageBox“出现在"mediaBox”的正下方，而不是像现在这样出现在它的左边。下面是我现在的代码：

var div = document.createElement("div");
//HTML code for each element to be added with each new checkpoint
var nameBox = "<b>Checkpoint " + markerId + ":</b> <input type='text' id=" + markerId + " placeholder='Checkpoint name'>"
var descBox = "<textarea rows='4' cols='35' placeholder='Checkpoint description' id=" + markerId + "desc style='vertical-align: top;'></textarea>"
var mediaBox = "<input type='text' id='media" + markerId + "' placeholder='paste URL to YouTube video' size='23'>"
var imageBox = "<input type='text' id='image" + markerId + "' placeholder='paste URL to image' size='23'>"
var removeButton = "<button type='button' value='Remove' id='remove" + markerId + "' onClick='remove_marker(" + markerId + ")'> Remove </button>"
var undoButton = "<button type='button' value='Undo' ' style='display: none;' id='undo" + markerId + "' onClick='remove_marker(" + markerId + ")'> Undo </button>"
var removeText = "<div id='removed" + markerId + "' style='display: none;'> Removed <button type='button' value='Undo' ' style='display: none;' id='undo" + markerId + "' onClick='undo_Remove(" + markerId + ")'> Undo </button> </div>" 
div.innerHTML = nameBox + descBox + mediaBox + imageBox + removeButton + removeText;

我知道它真的很混乱，理想情况下我应该使用CSS，但我现在不是。它在我的页面上如下所示：

如果图片地址框就在YouTube的下面，那就太好了！

非常感谢！

html

input

formatting

styles

回答 1

Stack Overflow用户

发布于 2013-04-30 05:29:58

为了尽量减少重写，您可以尝试将这两个框包装在一个无序列表中。如果您确实希望避免CSS，请设置内联样式以删除项目符号。

div.innerHTML = (nameBox 
                 + descBox 
                 + '<ul style="list-style: none;"><li>' 
                 + mediaBox + "</li><li>" + imageBox 
                 + "</li></ul>" 
                 + removeButton 
                 + removeText);

我刚刚在你的最后一行插入了相关的部分。你真的应该使用document.createElement和div.appendChild来创建这些东西。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/16288338

复制

相似问题

问使用HTML将一个HTML输入放在另一个HTML输入的正下方
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用HTML将一个HTML输入放在另一个HTML输入的正下方EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用HTML将一个HTML输入放在另一个HTML输入的正下方
EN