无法在按钮之间添加带有“innerHTML”的空格答案

【问题标题】：Can not add white space with 'innerHTML' between buttons无法在按钮之间添加带有“innerHTML”的空格
【发布时间】：2013-10-15 18:00:32
【问题描述】：

我有这个 javascript 用于在两个按钮之间添加空格，我刚刚创建并插入了 div:

document.getElementById("divID").appendChild(buttonONE);

document.getElementById("divID").innerHTML + ="           ";

document.getElementById("divID").appendChild(buttonTWO);

两个按钮之间有一个空格，但总是只有一个空格，就像您只按了一次空格键一样。

如何将这些空间增加到不止一个？

谢谢

【问题讨论】：

类似：stackoverflow.com/questions/213845/…

标签： javascript html

【解决方案1】：

HTML 中的所有空格（包括换行符）都减少到只有一个空格。这是规则。
不要使用空格。它们并不准确。使用一个元素并在 CSS 中为其指定宽度、内边距或边距。
如果您必须使用空格，请使用 &nbsp;。这是一个不间断的空间，所有这些都被打印出来。但真的，不要使用它。

【讨论】：

让我问你，为什么对&nbsp; 如此消极？这些有什么问题？谢谢
空格是不可预测的。字体大小在所有浏览器中并不相同，因此如果您计算精确的空格数以实现特定宽度，则在另一个浏览器中会有所不同。此外，如果您出于某种原因更改了字体或字体大小，所有这些空格的宽度也会发生变化。
使用'
```
'标签怎么样？
```

【解决方案2】：

您必须为每个空格使用&nbsp;（不间断空格），以防止浏览器将其显示为一个空格。

【讨论】：

【解决方案3】：

如果你不是在寻找指定的长度，使用html实体&nbsp;，
否则使用margin-left:10px;
在JavaScript中使用：
window.onload = function(){ var element = document.getElementById("Element-Id"); element.style.marginLeft = "20px";
你不需要@ 987654324@，但您确实需要确保该函数在加载后才执行（您可能知道。）

var b;
b = 0;

function move() {
  var a = document.getElementById("example");
  b += 20;
  a.style.marginLeft = b + "px" // For moving a specified amount, just remove var b, b = 0, b+=20; and then replace a.style.marginLeft = b+"px"with a.style.marginLeft = "[amount]"; 
}

button{
outline:0;
border-radius:35%;
border-width:0;
background-color:red;
color:white;
cursor:pointer;
}
button:hover{
color:red;
background-color:blue;
}
a{
cursor:default;
border-radius:10%;
border-width:10%;
}

<html>

<head>
  <title>Example</title>

  <head>

    <body>
      <button onclick="move()">Move the text 20px to the left.</button><br>
      <a style="background-color:black;color:white;" id="example">Example</a>
    </body>

</html>

【讨论】：

【解决方案4】：

CSS 解决方案怎么样？您可以给元素一个 ID 并使用 ID 选择器：

 #buttonTWO
    {
       margin-left: 20px;
    }

或者如果你不能使用 CSS 用 Javascript 设置它：

document.getElementById("divID").appendChild(document.getElementById("buttonONE"));
var buttonTwo = document.getElementById("buttonTWO");
buttonTwo.style.marginLeft = "20px";
document.getElementById("divID").appendChild(buttonTwo);

http://jsfiddle.net/Std8J/

【讨论】：

【解决方案5】：

我相信您会因为 html 剥离空格的性质而得到这个。

您也许可以在呈现该文本的任何元素上使用 white-space: pre css 属性。

<div id="divID" style="white-space: pre"></div>

我对你的应用了解不多，但也许这就足够了。

【讨论】：

【解决方案6】：

（这是迟到的答案，但它会像我在寻找解决方案时一样让其他登陆此页面的人受益）

使用 html 的 pre 标签解决了我的问题。

我正在显示一个有时会有多个空格的数组，我需要保留它而不将其减少到一个空格。

【讨论】：