我正在尝试创建一个网页,点击一个按钮我可以添加 div
标签。我想做的是,我将在一个 div
中创建两个 div
标签,这样所有的展示都是统一的,类似于一个有两列和多列的表格行,第一列仅包含标签,第二列将包含 textbox
。
这是 JS 文件:
var counter = 0;
function create_div(type){
var dynDiv = document.createElement("div");
dynDiv.id = "divid_"+counter;
dynDiv.class="main";
document.body.appendChild(dynDiv);
question();
if(type == 'ADDTEXTBOX'){
ADDTEXTBOX();
}
counter=counter+1;
}
function question(){
var question_div = document.createElement("div");
question_div.class="question";
question_div.id = "question_div_"+counter;
var Question = prompt("Enter The Question here:", "");
var node=document.createTextNode(Question);
question_div.appendChild(node);
var element=document.getElementById("divid_"+counter);
element.appendChild(question_div);
}
function ADDTEXTBOX(){
var answer_div = document.createElement("div");
answer_div.class="answer";
answer_div.id = "answer_div_"+counter;
var answer_tag = document.createElement("input");
answer_tag.id = "answer_tag_"+counter;
answer_tag.setAttribute("type", "text");
answer_tag.setAttribute("name", "textbox");
answer_div.appendChild(answer_tag);
var element=document.getElementById("divid_"+counter);
element.appendChild(answer_div);
}
这是 CSS 文件:
.question
{
width: 40%;
height: auto;
float: left;
display: inline-block;
text-align: justify;
word-wrap:break-word;
}
.answer
{
padding-left:10%;
width: 40%;
height: auto;
float: left;
overflow: auto;
word-wrap:break-word;
}
.main
{
width: auto;
background-color:gray;
height: auto;
overflow: auto;
word-wrap:break-word;
}
我的问题是代码工作正常,但两个部门都没有在一条直线上。在屏幕上打印第一个 div 之后,第二个分区出现在另一行中。我怎样才能使 div 的
出现在同一行中?
PS:我应该坚持目前使用 div 的想法还是应该尝试其他方法?喜欢 table ?
最佳答案
它在不同行中的原因在于你的 JS 代码,尝试像下面这样设置你的类:
//question_div.class="question";
question_div.setAttribute("class", "question") ;
和
//answer_div.class="answer";
answer_div.setAttribute("class", "answer");
还有这个:
//dynDiv.class="main";
dynDiv.setAttribute("class", "main");
您的 div 没有正确设置类属性。如果您使用 Firefox 检查您构建的元素是否与您设计的一样,我建议为开发人员使用 chrome 内置工具或 FireBug 附加组件。 您可以在此处查看代码:http://jsfiddle.net/Nnwbs/2/
var counter = 0;
function create_div(type){
var dynDiv = document.createElement("div");
dynDiv.id = "divid_"+counter;
//dynDiv.class="main";
dynDiv.setAttribute("class", "main");
document.body.appendChild(dynDiv);
question();
if(type == 'ADDTEXTBOX'){
ADDTEXTBOX();
}
counter=counter+1;
}
function question(){
var question_div = document.createElement("div");
//question_div.class="question";
question_div.setAttribute("class", "question") ;
question_div.id = "question_div_"+counter;
var Question = prompt("Enter The Question here:", "");
var node=document.createTextNode(Question);
question_div.appendChild(node);
var element=document.getElementById("divid_"+counter);
element.appendChild(question_div);
}
function ADDTEXTBOX(){
var answer_div = document.createElement("div");
//answer_div.class="answer";
answer_div.setAttribute("class", "answer");
answer_div.id = "answer_div_"+counter;
var answer_tag = document.createElement("input");
answer_tag.id = "answer_tag_"+counter;
answer_tag.setAttribute("type", "text");
answer_tag.setAttribute("name", "textbox");
answer_div.appendChild(answer_tag);
var element=document.getElementById("divid_"+counter);
element.appendChild(answer_div);
}
create_div("ADDTEXTBOX");
关于这个方法,我指的是 div 或表格,你使用 div 是正确的,通常建议这样做。
此外,在您更正您的 JS 代码后,还可以根据需要修复一些您的 css 样式。
关于javascript - div标签对齐问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13230272/