javascript 无法在按钮之间添加带有“innerHTML”的空白
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19387954/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can not add white space with 'innerHTML' between buttons
提问by user2860857
I have this javascript for adding white space between two buttons, I just created and inserted in a div:
我有这个用于在两个按钮之间添加空格的 javascript，我刚刚创建并插入了一个div：
document.getElementById("divID").appendChild(buttonONE);
document.getElementById("divID").innerHTML + =" ";
document.getElementById("divID").appendChild(buttonTWO);
There is a space between the two buttons, but is always just one space, like if you had pressed the space-bar only once.
两个按钮之间有一个空格，但始终只有一个空格，就像您只按了一次空格键一样。
How can I increase these spaces to more than one?
如何将这些空间增加到一个以上？
Thanks
谢谢
回答by
All white space in HTML, including line breaks, gets reduced to just one space. That's the rule.
Don't use spaces. They are not exact. Use an element and give it a width, padding, or margin in CSS.
If you MUST use spaces, use
. This is a non-breaking space, and all of them get printed. But really, don't use it.
HTML 中的所有空白，包括换行符，都减少到只有一个空格。这就是规则。
不要使用空格。它们并不准确。使用一个元素并在 CSS 中为其指定宽度、填充或边距。
如果您必须使用空格，请使用
. 这是一个不间断的空间，所有这些都被打印出来。但真的，不要使用它。
回答by Elon Than
You have to use (non-breaking space) for each space to prevent browser from displaying it as one space.
您必须 为每个空格使用（不间断空格）以防止浏览器将其显示为一个空格。
回答by Hanlet Esca?o
What about a CSS solution? You can give the element an ID and use an ID selector:
CSS 解决方案怎么样？你可以给元素一个 ID 并使用一个 ID 选择器：
#buttonTWO
{
margin-left: 20px;
}
or if you can't use CSS set it with Javascript:
或者如果您不能使用 CSS 使用 Javascript 设置它：
document.getElementById("divID").appendChild(document.getElementById("buttonONE"));
var buttonTwo = document.getElementById("buttonTWO");
buttonTwo.style.marginLeft = "20px";
document.getElementById("divID").appendChild(buttonTwo);
回答by Meenohara
(This is late answer, but it will benefit others who land on this page like I did when looking for a solution)
（这是迟到的答案，但它会让其他人像我在寻找解决方案时那样登陆此页面）
Using the pre tag for html solved my problem.
使用 html 的 pre 标签解决了我的问题。
I was displaying an array which sometimes would have more than one space and I needed to preserve this without reducing it to a single space.
我正在显示一个数组，该数组有时会有多个空格，我需要保留它而不将其减少为一个空格。
回答by Zackery Spry
If you are not looking for a specified length, use the html entity ,
otherwise use margin-left:10px;
In JavaScript use:window.onload = function(){
var element = document.getElementById("Element-Id");
element.style.marginLeft = "20px";
You do not need window.onload = function(){}, but you do need to make sure that the function is not executed until after it is loaded (As you probably know.)
如果您不是在寻找指定的长度，请使用 html entity ，
否则使用margin-left:10px;
在 JavaScript 中使用：window.onload = function(){
var element = document.getElementById("Element-Id");
element.style.marginLeft = "20px";
您不需要window.onload = function(){}，但您需要确保该函数在加载后才执行（您可能知道。 )
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>