当display:inline时，在多行文字的尾随空格中未注册鼠标单击
当display:inline时，在多行文字的尾随空格中未注册鼠标单击
提问于 2015-07-23 02:24:05
我正在尝试显示一个图标、一个文本和另一个图标--作为一个连续的字母串。标记看起来像这样：
<div class="scroll"...>
<i class="icon ion-close" ng-click="removeItem(x)"></i>
<div class="FOO" ng-click="clipboardItem(x)">
A multi-line text message
<div>
<i class="icon ion-clipboard" ng-if="..."></i>
</div>当FOO的样式为display:block (或inline-block)时，在多行文本消息的矩形区域中的任意位置单击都会被注册。但是这两个图标和文本消息出现在不同的行上，这不是我想要的。
当FOO设置为display:inline样式时，在视觉上它是一个连续的图标和文本字符串，但不会触发在换行符末尾的空格中单击。用户必须小心地将鼠标放在字母上，然后单击它。太乱了！
我想知道下面发生了什么，以及如何正确地设计它的样式。就点击区域而言，inline有什么特别之处？
使用Chrome，离子，角度，在Windows上测试。
非常感谢。
回答 1
Stack Overflow用户
发布于 2015-07-23 06:36:42
我很难理解你想要什么。这是我的小提琴http://jsfiddle.net/pd8dLwv2/6/
我将上面的div包在一个锚点中，并添加了一个指针，这样整个部分就可以点击了。
<a onclick="alert(99)" style="cursor:pointer">
<div class="scroll" ...> <i class="icon ion-close" ng-click="removeItem(x)"></i>
<div class="FOO">A multi-linetextmessage where mouse click region is not very intuitive unless it had a background A multi-linetextmessage where mouse click region is not very intuitive unless it had a background A multi-linetextmessage where mouse click region is not very intuitive unless it had a background A multi-linetextmessage where mouse click region is not very intuitive unless it had a background</div>
<div><i class="icon ion-clipboard" ng-if="..."></i>
</div>
</div>
<hr/>
</a>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/31571104
复制相关文章
相似问题
腾讯云开发者
