6

当双击灰色标签中的文本（有浮动：右）时，chrome（webkit）也会选择行首的文本（有浮动：左）。有没有办法在不添加额外标记或更改标签源顺序的情况下解决这个问题？

http://codepen.io/lezz/pen/xBAzr

4

3 回答 3

3

首先只是为了演示问题：

我们有两个相邻的div元素——每个元素都有内容，并且在标记中它们之间没有空格。

通过双击选择其中之一的内容时 - 仅选择单击的 div 的内容。

但是，当divs 使用 CSS 浮动并且如上选择其中一个 div 时 - Chrome 会选择 BOTH divs 的内容

.rfloat {
  float: right;
}

.lfloat {
  float: left;
}
<h2>Non-floated elements: Double click selects each div separately</h2>

<div>Abc</div><div>def</div>

<hr>
<h2>(On Chrome:) Floated elements: Double click selects BOTH divs</h2>
<div class="rfloat">Abc</div><div class="lfloat">def</div>

我不知道为什么 Chrome 会以这种方式处理浮动元素 - 这可能是一个错误，但就您的问题而言：

有没有办法在不添加额外标记或更改标签源顺序的情况下解决这个问题？

作为一种解决方法，您可以display:flex在浮动的容器元素上进行设置——这会使弹性项目上的浮动声明变得多余，因为浮动不适用于弹性项目——请参阅规范

float 和 clear 不会创建 flex 项目的浮动或清除，并且不要使其脱离流动。

此外，我们可以使用一些 flexbox 属性来设置 div 的样式，使其看起来与浮动时相同：

.container {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
}


.container {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
}
.rfloat {
  float: right;
}

.lfloat {
  float: left;
}
<h2>Workaround: Set container with display:flex</h2>
<div class="container">
  <div class="rfloat">Abc</div>
  <div class="lfloat">def</div>
</div>

于 2017-08-17T12:31:26.173 回答
2

这是因为您没有空格（或其他单词结尾字符）分隔这两个spans. 如果您的段落包含没有空格或其他相关词尾符号的段落，则您希望选择包含它们。在文本级别，您的内容都是一个单词（“123456789Some”）。举个例子：

<span>Abc</span><span>def</span>

变成： Abcdef

即使您将第一个跨度设置为与第二个跨度相距数万亿像素，这两个元素仍将被归类为一个单词。

于 2013-04-04T11:12:23.127 回答
0

问题是因为容器中的间距。单词之间应该有一个空格（在容器内部或外部）。因此，在尝试了不同的可能选项后，我发现了以下内容（如果我错了，请纠正我）

  1. 如果它是Block元素容器，它将被放置在浏览器中的两行中，不需要任何间距。
  2. 如果是，inline则inline-block内容将放在浏览器中的单行中，因此我们必须明确给出两个容器内或容器之间的间距。

.rfloat {
  float: right;
}

.lfloat {
  float: left;
}
.block{
  display: inline-block;
}
<h2>floated elements with space: Double click selects each div separately</h2>
<div class="rfloat"> Abc</div><div class="lfloat"> def</div>
<br>
<hr>

<h2>floated elements without space: Double click BOTH divs</h2>
<div class="rfloat">Abc</div><div class="lfloat">def</div>
<br>
<hr>

<h2>Non-Floated elements with space: Double click selects each div separately</h2>
<div class="block"> Abc</div><div class="block"> def</div>
<br>
<hr>

<h2>Non-Floated elements without space: Double click selects BOTH divs</h2>
<div class="block">Abc</div><div class="block">def</div>
<br>
<hr>

<h2>Non-Floated elements without space(divs separated with line break in HTML): Double click selects div separately</h2>
<div class="block">Abc</div>
<div class="block">def</div>

于 2017-08-23T10:43:42.400 回答