列表組項目中的可點擊按鈕或圖形

現在我試圖在列表組項目中插入圖形或按鈕。我想要的是，當用戶點擊列表組中的任何地方時，它們都鏈接到某個頁面，但當他們點擊圖形或按鈕時，它們鏈接到另一頁面。爲什麼我會嘗試這樣做，它不斷將圖形或按鈕放在列表組項目框外。爲什麼是這樣？我怎樣才能解決這個問題？列表組項目中的可點擊按鈕或圖形

非常感謝。

代碼：

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

相關問題