Question

插入文本之间时，我遇到了div上方出现空格的问题。我试过保证金＆amp;填充的东西，但它还没有成功。我认为这一定是一个很常见的问题，但我似乎无法找到答案。这是一个jsfiddle。

div.appear {
  background-color:rgba(29,29,29,0.9);
  position: absolute;
  display:none;
  padding: 0 10px 10px 10px ;
  z-index: 1000000;
	color: white;
	font-size:13px;
}
div.hover  {
  cursor:pointer; 
	color: #666;
  display: inline-block;
	
}
div.hover:hover div.appear {
    display:block;
}

<p>There is no exact definition on when a short story is too long, thus a<div class="hover">novella<div class="appear">A novella is a text that is longer than a short story, but not quite long enough to be a novel.</div></div> or a <div class="hover">novel<div class="appear">A novel is relatively long piece of fiction. What we often refer to as "a book".</div></div> on the other hand too short, becoming merely an <div class="hover">anecdote<div class="appear">an anecdote is a short tale</div></div>, to fit into the genre, but most short stories that we work with in the lessons are less than ten pages.

Answer 1

那是因为你使用了不正确的HTML标签。

请勿在{{1}}

 req.query.t // ["one", "two", "three"]

<div>为<p>，因此他们会尝试在视图中一直展开。

使用不会修改布局的<div>代替display:block您的文字和工具提示：

＆＃13;

<div>

＆＃13;

<span>

＆＃13;

Answer 2

你不应该将div放在<p>标签内。如果您查看使用开发人员工具所做的操作，您会看到Chrome在单词＆＃34;＆＃34;之后插入</p>标记，这就是填充/边距来自的位置。< / p>

只需制作所有<div>代码<span>代码即可。

<p>There is no exact definition on when a short story is too long, 
thus a<span class="hover">novella<span class="appear">A novella is a 
text that is longer than a short story, but not quite long enough to be 
a novel.</span></span> or a <span class="hover">novel<span 
class="appear">A novel is relatively long piece of fiction. What we 
often refer to as "a book".</span></span> on the other hand too short, 
becoming merely an <span class="hover">anecdote<span class="appear">an 
anecdote is a short tale</span></span>, to fit into the genre, but most 
short stories that we work with in the lessons are less than ten pages.

出现在文本段落中的DIV以上空间（工具提示）

2 个答案: