onclick事件包括剩余空间

Question

在下面的HTML代码中，当我单击文本时，将显示一条消息。 我也需要onclick事件在文本右侧也包含空白。

 <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

您将需要在元素上使用表，例如display：table＆display：table-cell，并为元素提供“ width：100％”，以使其占用行中的剩余空间

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