Question

有没有办法在元素之间创建空格而不使用边距和实际空格？

标记：

<div><span>A</span><span>B<span><span>C<span></div>

结果：

ABC

原因是，当用户点击div元素时，我需要抓住span的点击事件。

我尝试使用word-spacing，但显然它不是为此而创建的，所以它不起作用。

Answer 1

这听起来很符合你的需要。字母之间的间距就像它们之间有一个字符一样，只有在单击其间的空格时才能运行代码。也许你确实想要避免利润，但如果不知道你在那里的推理就很难说。

＆＃13;

document.querySelector('div').addEventListener('click', function(e) {
  if (e.target === this) {
    console.log('div clicked');
  }
});

＆＃13;

span {
  margin: .5em;
}

span:first-child {
  margin-left: 0;
}

span:last-child {
  margin-right: 0;
}

＆＃13;

<div>
  <span>A</span>
  <span>B</span>
  <span>C</span>
</div>

＆＃13;

Answer 2

您可以使用：

     span
     { 
       letter-spacing: 10px; 
     }

而不是word-spacing它将在元素之间创建空格。喜欢：A B C.

希望它会对你有所帮助。

Answer 3

你可以使用填充。

span {
    padding-right: 10px;
}

Answer 4

如何以相反的方式做到这一点？

<强> HTML：

<div>A<span class="spc"></span>B<span class="spc"></span>C<span class="spc"></span>D</div>

<强> CSS：

.spc{padding-left:10px;}

<强> JS / jQuery的：

$('.spc').click(function(){
    alert('hello');
});

jsFiddle Demo

Answer 5

您可以尝试这样做： Demo

<强> CSS：

div > span {
    width: 30% !important;
    display:block;
    float:left;
}

<强> HTML：

<div><span>A</span><span>B</span><span>C</span></div>

Answer 6

如果你在两个字母之间创建没有边距的空格，那么你可以放

padding-right

或

padding-left

我希望它能为你做好准备

Answer 7

如果只能点击跨度之间的空格，请将click函数应用于div，使用 添加空格，然后防止在子跨度上传播。

$('#container').click(function() {
  alert('click');
})

$('#container span').click(function(e) {
  e.stopPropagation();
});

#container {
  border: 1px solid #888888;
  width: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="container">&nbsp;&nbsp;&nbsp;<span>A</span>&nbsp;&nbsp;&nbsp;<span>B</span>&nbsp;&nbsp;&nbsp;<span>C</span>&nbsp;</div>

Answer 8

有些方法可以使用<br></br>或标签将空格添加到HTML中，使用哪种语法    段落语法也很有用<p></p>。

Answer 9

<div class="span-btn-group">
<span>A</span>
<span>B</span>
<span>C</span>
</div>

.span-btn-group span
{
 display: inline-block;
 padding: 6px 10px;
 background: green;
 border-radius: 3px;
}

HTML中的间距元素

9 个答案: