0

这个有点复杂，我将详细描述我最初的问题以及我目前解决它的位置。

问题：

我的 CMS 输出一些 HTML 用于输入，如下所示：

<input type="text"><input type="submit">

现在因为这些输入元素不是每个都在自己的行上，所以按钮和文本字段之间缺少空格，如下所示：

问题 - 没有空间

首选的方式，以及生成的大部分 HTML 实际上是这样的，是将 HTML 放在单独的行上：

<input type="text"/>
<input type="submit"/>

使它们呈现如下：

应该是这样的

现在，我无法更改 HTML（由 CMS 生成），也无法使用边距和负边距，因为它们会影响所有输入。

我发现这个 jQuery 解决方案似乎可以完美运行并解决了问题：

$('input').after(" ");

它在所有输入元素之间提供一致的空白，就好像它们以正确的方式编写一样。但是，我不能在我的解决方案中使用 jQuery。我们不使用 jQuery 库。我只能使用纯 javascript 或 YUI3。

现在，stackoverflow 上的某个人帮助我将上面的 jQuery 转换为以下 YUI3 代码：

Y.all('input').insert('&nbsp','after');

这确实有效，因为它在没有空白的地方添加了空白。但是，这段代码的问题在于它还为已经有空格的正确 HTML 片段添加了额外的空格。

现在我的问题是：

有没有办法

(1)改变

Y.all('input').insert('&nbsp','after');

使其功能与

$('input').after(" ");

或者，或者（2）可能有一个纯 javascript 解决方案可以做 jQuery 解决方案所做的事情，

或者（3）有没有一种方法可以首先删除元素之间的所有空格，然后使用上面的 YUI 方法添加一个空格？

谢谢，并为模糊的问题标题道歉！:)

编辑：只是一些额外的信息。

这是实际问题：http: //jsfiddle.net/C3sHf/3/

在这里，您可以看到 jQuery 代码如何解决问题并制作一致的空白：http: //jsfiddle.net/C3sHf/2/

这是 YUI3 解决方案，但它不能按预期工作：http: //jsfiddle.net/9eTrP/1/

4

1 回答 1

0

CSS应该是格式化事物的正确方法。

input[type="submit"]{
    margin-left: 0.5em;
}

或者

input[type="text"]+input[type="submit"]{
    margin-left: 1em;
}

http://jsfiddle.net/5eG4y/

您可以使用纯 javascript DOM创建一个文本节点并在提交之前插入

var submit = document.querySelector('input[type="submit"]');
var foo = document.createTextNode("Foo");

submit.parentElement.insertBefore(foo, submit);

http://jsfiddle.net/5eG4y/1/

于 2013-09-03T19:49:53.133 回答