代码之家 › 专栏 › 技术社区 › Sastrija Victor

在不同的行中显示两个动态添加的元素

joomla html javascript

Sastrija Victor · 技术社区 · 15 年前

我有一个 HTML 页面如下:

<html>
    <body>
         <div id="emaildiv" class="main" style="width:150px;height:80px;"></div>
    </body>
</html>

我想添加一个带有 TEXT 和 BUTTON 动态地融入其中。所有这些都是通过使用以下JavaScript实现的。

function newEmailForContact() {
    var parentDiv = document.getElementById('emaildiv');
    var newEmailDiv = document.createElement('div');
    newEmailDiv.setAttribute('id','newEmailDiv');
    newEmailDiv.setAttribute('style', 'display:table;');

    var newEmail = document.createElement('INPUT');
    newEmail.setAttribute('type','text');
    newEmail.setAttribute('name','newEmail');
    newEmail.setAttribute('class', 'textfield_addemail');
    newEmail.setAttribute('id','newEmail');

    var addEmailBtn = document.createElement('INPUT');
    addEmailBtn.setAttribute('type','button');
    addEmailBtn.setAttribute('name','addEmail');
    addEmailBtn.setAttribute('id','addEmail');
    addEmailBtn.setAttribute('value', 'Add');
    newEmailDiv.appendChild(newEmail);
    newEmailDiv.appendChild(addEmailBtn);

    parentDiv.appendChild(newEmailDiv);
}

但是 文本 按钮显示在两个不同的行中。

编辑: CSS类:

.textfield_addemail    {
    border-width: 1px;
    border-style: solid;
    border-color: #999999;
    background-repeat: repeat-x;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #333333;
    width: 120px;
    height: 15px;
    }

我要在同一行中显示这两个。有什么解决办法吗?

2 回复 | 直到 15 年前

Nick Craver 15 年前

问题是你的首字母 <div> 在150像素时不够宽,只需稍微增大一点,如下所示:

<div id="emaildiv" class="main" style="width:250px;height:80px;"></div>â

You can see a working/updated example with only this change here .

JochenJung 15 年前

漏掉

newEmailDiv.setAttribute('style', 'display:table;');

那么你的 span 将显示为 内联的 你的按钮应该出现在它旁边

推荐文章

talkinggoat · Joomla:将文章图片放在脸书的头部

7 年前

MailBlade · 使用>=会给出错误的结果吗?

7 年前

Entretoize · 找不到用于在joomla db中插入项目的良好编码

7 年前

geoplous · Joomla:mod\u articles\u news内的分类链接

7 年前

Daniel Jensen · 使用变量更新joomla数据库

7 年前

Charles Wilkins IV · Joomla注册表闪烁字段,然后消失

7 年前

Nick v. D. · PHP-is\u文件表示文件不存在,但确实存在

7 年前

user1616338 · Joomla 3号。自定义组件中的x覆盖按钮功能

7 年前

user11029 · 编程joomla用户创建与登录显示冲突

7 年前

shivanee gupta · 无法在joomla 3中命中onUserBeforeSave事件

7 年前