html inline元素之间的空格

最新推荐文章于 2024-05-17 14:16:48 发布

最新推荐文章于 2024-05-17 14:16:48 发布 · 655 阅读

文章标签：

#html

html 专栏收录该内容

17 篇文章

订阅专栏

本文探讨了HTML中使用循环生成span元素时出现的间距问题，并提供了通过JavaScript动态添加span元素及其后的空格来保持页面一致性的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >


	<div id="div">
		<span>aaa</span> <span>bbb</span>
	</div>
	<div>
		<button onclick="bar();">bar</button>
	</div>

[img]http://dl.iteye.com/upload/picture/pic/124701/f9c6d9f5-db3d-3352-9e3b-3b66164ca8d5.jpg[/img]
由于循环标签的问题,生成的span之间总是有空格甚至换行,导致页面渲染的时候,中间自然而然的出现了空格.
如果在页面中用js动态添加新的span元素


function bar() {
		var div = document.getElementById("div");
		var span = document.createElement("span");
		span.innerHTML = "tffft";
		div.appendChild(span);
	}

那么新生成的span元素之间是没有空格的,导致了页面的不一致.
[img]http://dl.iteye.com/upload/picture/pic/124703/99ad4a2f-6eec-3d59-a37a-364aff7b576e.jpg[/img]

可以在新生成的span元素后面,用createTextNode的方法,人工添加空格.


	function bar() {
		var div = document.getElementById("div");
		var span = document.createElement("span");
		span.innerHTML = "tffft";
		div.appendChild(span);
		var sp=document.createTextNode(" ");
		div.appendChild(sp);
	}

[img]http://dl.iteye.com/upload/picture/pic/124705/3fc394b5-af31-3adf-a585-a06d10092324.jpg[/img]

不过话又说回来了,如果就想让span与span之间没有空格呢.
把span写成


<span>aaa</span><span>bbb</span><span>ccc</span><span>ddd</span>

或者


		<span>aaa</span
		><span>bbb</span
		><span>ccc</span
		><span>ddd</span>

都没有问题,不过就怕eclipse的自动格式化代码来捣乱,况且用循环标签生成这个东西也很麻烦.
消除空格的方法可以参考
[url]http://www.zhangxinxu.com/wordpress/?p=2357[/url]