onclick 事件包括剩余的 space

Question

在下面的 HTML 代码中，当我点击文本时会显示一条消息。我需要 onclick 事件也包括文本右侧的白色 space。

<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>


<span class="list-group-item" type="button">
    <span class="label label-primary label-as-badge">3</span>
    <span class="label label-default label-as-badge">1</span>
    <span class="label label-success label-as-badge">0</span> 
    <span onclick="alert('you click me')">my text</span>  
</span>

更新

由于我的话对某些人来说是模棱两可的，所以我用图片来表达。蓝色椭圆显示 onclick 操作区域。红色椭圆表示我想扩大这个事件的范围。如果用户点击红色椭圆，则必须激活此事件。

Answer 1

您需要使用 table 布局，在元素上使用 display:table 和 display:table-cell，并给出要占用的元素 'width:100%'行中剩余 space

<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>


<span style="display:table;width:100%;" class="list-group-item" type="button">
    <span style="display:table-cell;" class="label label-primary label-as-badge">3</span>
    <span style="display:table-cell;" class="label label-default label-as-badge">1</span>
    <span style="display:table-cell;" class="label label-success label-as-badge">0</span> 
    <span style="display:table-cell;width:100%;background-color:#ccc;" onclick="alert('you click me')">my text</span>  
</span>

onclick 事件包括剩余的 space

onclick event include the remaining space

html

javascript

css-position

dom-events