onclick事件包括剩余空间

Question

在以下HTML代码中，当我点击文本时，会显示一条消息。我需要<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>事件包括文本右侧的空白区域。

＆＃13;

＆＃13;

onclick

＆＃13;

＆＃13;

＆＃13;

更新

由于我的话对某些人来说是模棱两可的，我用图像来展示它。蓝色椭圆显示new Double(1.25) 操作的区域。红色椭圆形显示了我想扩展此事件的范围。如果用户单击红色椭圆，则必须激活此事件。

Answer 1

您需要使用display：table＆amp ;;显示：元素上的表格单元格，并给出元素宽度：100％＆＃39;你想占用行中的剩余空间

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;