Question

我正在尝试显示一个图标，一个文本和另一个图标 - 作为连续的字母串。标记看起来像：

<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有什么特别之处？

在Windows上使用Chrome，Ionic，Angular，测试。

非常感谢。

Answer 1

我很难理解你想要的东西。这是我的小提琴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>

显示时，鼠标单击未在多行文本的尾随空格中注册：内联

1 个答案: