列表组项目中的可点击按钮或图形

现在我试图在列表组项目中插入图形或按钮。我想要的是，当用户点击列表组中的任何地方时，它们都链接到某个页面，但当他们点击图形或按钮时，它们链接到另一页面。为什么我会尝试这样做，它不断将图形或按钮放在列表组项目框外。为什么是这样？我怎样才能解决这个问题？列表组项目中的可点击按钮或图形

非常感谢。

代码：

<div class="list-group"> 
      <a href="my_django_url" class="list-group-item"> 
          <a href="another_django_url"><span class="glyphicon some-glyphicon"></span></a> 
      </a>

来源

2014-11-23 steve-o

在这里你去：

<div class="list-group"> 
    <li class="list-group-item"> 
     <a href="my_django_url"> 
      first link 
     </a> 
     <a href="another_django_url" class="icon"> 
      <span class="glyphicon glyphicon glyphicon-search"></span> 
     </a> 
    </li> 
</div> 

.icon { 
    float: right; 
}

小提琴：http://jsfiddle.net/9r14uuLw/

来源

2014-11-25 10:22:00 ncosta

这听起来像你想整个列表组项目是一个链接，这不是由所提供的答案完成的。你不能在另一个<a>标签中有<a>标签，所以我认为你需要使用绝对定位来完成你正在尝试做的事情。

<div class="list-group-item" style="padding: 0;"> 
    <a href="#" style="display: block; padding: 10px 15px;">test</a> 
    <a href="#" class="btn btn-sm btn-danger" style="position: absolute; top: 50%; right: 15px; margin-top: -15px;">hi</a> 
</div>

这应该是接近你所追求的。我只是添加了一些内联样式以快速向您展示如何完成，但您可能想要提出一些更通用的样式以便轻松地重用。

来源

2015-01-12 22:30:40 dvanderb

赦免简洁（工作/抨击）：

这就是我将要打算为我的项目（S）休息...

<div class="list-group-item row" ng-repeat="item in list.items"> 
    <a class="col-xs-6 col-sm-8 col-md-10 col-lg-10 pull-left" href="#/lists/{{list.id}}/items/{{item.id}}"><h5>{{item.name}} ({{item.quantity}})</h5></a> 
    <h5 class="col-xs-6 col-sm-4 col-md-2 col-lg-2 pull-right"> 
     <a class="pull-left" href="#/lists/{{list.id}}/items/{{item.id}}/edit" ng-show="list.name !== 'all-deleted-items'"><u>Edit</u></a> 
     <a class="pull-right" href="" ng-click="removeItem(item, $event)" ng-show="list.name !== 'all-deleted-items'"><u>Remove Item</u></a> 
    </h5> 
</div>

这是工作的代码来自我的项目 - 为粗略的复制/粘贴道歉！较低的<h5>仅用于垂直对齐。 row类增加到div.list-group-item是占用完整的容器宽度（可选）。

#caveat：

不整体高度是可行为纽带，但是这可能是一个体面的妥协。

希望这会有所帮助！

来源

2015-04-17 21:58:36 Cody

列表组项目中的可点击按钮或图形

回答

这就是我将要打算为我的项目（S）休息...

#caveat：

相关问题