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

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

javascript html joomla

Javascript 在不同的行中显示两个动态添加的元素,javascript,html,joomla,Javascript,Html,Joomla,我有一个HTML页面，如下所示： <html> <body> <div id="emaildiv" class="main" style="width:150px;height:80px;"></div> </body> </html> 但是文本和按钮显示在两个不同的行中编辑：- CSS类：- .textfield_addemail { border-width: 1px;

我有一个

HTML

页面，如下所示：

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

但是

文本

和按钮显示在两个不同的行中

编辑：- 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;
    }

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

省去

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

然后，您的

span

将显示为内联，您的按钮应该出现在它旁边

问题是您的初始

在150px时不够宽，只需稍微增大大小，如下所示：

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

正如您所说，我已经对宽度进行了更改，但它仍然显示在两个不同的行中。有很多空间可以容纳按钮。@Joe-鉴于您的示例应该可以使用……您是否有其他CSS规则应用于这些元素？请尝试将较小的宽度应用于您的输入字段：newEmail.setAttribute（'size'，'8'）；是的，我正在使用CSS类。我在问题中更新了它。请查收it@Joe-这里有一个更新的示例：这也不起作用吗？我在这里测试了Chrome/FF/IE8，你在用别的东西吗？如果这个例子有效，那么在你的问题代码/风格之外还有一些东西会影响这个问题。

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