jQuery手機按鈕圖標位置太左了

我正在使用JQM 1.4.2並嘗試使用類.ui-btn-icon-left時使按鈕圖標更接近文本。jQuery手機按鈕圖標位置太左了

我拍了一個屏幕截圖，並按照我希望它在中間按鈕中查看的方式修改了列表圖標。我似乎根本就看不到左側的圖標。使用填充只是改變了頂部和底部。

我需要使用什麼類來完成此操作？

<div data-role="navbar" >   
     <ul id="navfooter"> 
      <li><a href="#home" class="ui-nodisc-icon ui-icon-home ui-btn-center ui-btn-active ui-state-persist svbtn" data-transition="slide">Tour</a></li> 
      <li><a class="ui-nodisc-icon ui-icon-bars ui-btn-icon-left svbtn" href="#listViewPage" data-transition="slide" >List</a></li> 
      <li><a class="ui-nodisc-icon ui-icon-location ui-btn-icon-left svbtn" href="#map-page" data-transition="slide" >Map</a></li>     
     </ul> 
    </div>

enter image description here

這裏是什麼它現在看起來像添加CSS

.ui-icon-home::after { 
position: relative; 
left:10px; 
}

enter image description here

來源

2014-10-09 BGecko

您可以設置圖標的左側位置的按鈕中：

.ui-navbar a:after { 
    left: 20% !important; 
}

然而，這將允許圖標和文字重疊的按鍵變小。

實現此目的的更好方法可能是將圖標與文本內聯。用CSS放置文本前的跨度以放置圖標。爲了控制圖標和文本之間的距離，調整幅度右屬性：

<div data-role="navbar"> 
    <ul> 
     <li><a href="#"><span class="ui-icon-alert ui-btn-icon-notext inlineIcon"></span>Summary</a> 
     </li> 
     <li><a href="#" class="ui-btn-active"><span class="ui-icon-star ui-btn-icon-notext inlineIcon"></span>Favs</a> 
     </li> 
     <li><a href="#"><span class="ui-icon-gear ui-btn-icon-notext inlineIcon"></span>Setup</a> 
     </li> 
    </ul> 
</div> 

.inlineIcon { 
    display: inline-block; 
    position: relative; 
    vertical-align: middle; 
    margin-right: 6px; 
}

如果你想在黑色的圖標，他們背後沒有光盤的UI-ALT-圖標類添加到跨度和改變CSS擺脫盤：

<div data-role="navbar"> 
    <ul> 
     <li><a href="#"><span class="ui-alt-icon ui-icon-alert ui-btn-icon-notext inlineIconNoDisk"></span>Summary</a> 
     </li> 
     <li><a href="#" class="ui-btn-active"><span class="ui-alt-icon ui-icon-star ui-btn-icon-notext inlineIconNoDisk"></span>Favs</a> 
     </li> 
     <li><a href="#"><span class="ui-alt-icon ui-icon-gear ui-btn-icon-notext inlineIconNoDisk"></span>Setup</a> 
     </li> 
    </ul> 
</div> 

.inlineIconNoDisk { 
    display: inline-block; 
    position: relative; 
    vertical-align: middle; 
    margin-right: 6px; 
} 
.inlineIconNoDisk:after { 
    background-color: transparent !important; 
}

這裏是一個DEMO顯示所有3個選項

來源

2014-10-09 22:17:44 ezanker

謝謝，這確實很不錯。出於某種原因，我的圖標與您演示文稿中的文字不太接近。 – BGecko 2014-10-09 23:03:59

@BGecko，使margin-right小於6px，如果光盤被隱藏，甚至可以使用負數：http://jsfiddle.net/ezanker/j5m4Lwtt/2/ – ezanker 2014-10-10 00:41:06

後的圖像如果它只是你正在尋找移動主頁圖標，將以下內容應用到該圖標上應該修復它，但很難說沒有看到菜單正在運行，最佳解決方案是什麼。

.ui-icon-home::after { 
    left: (amount to shift left)px; 
}

注後::適用的造型，只是圖標，而「的.ui圖標家」適用於整個錨元素。同樣，如果你可以鏈接到一個pastebin或類似的東西，給你一個更好的答案會更容易。

來源

2014-10-09 21:53:37 colonelsanders

我希望所有的圖標導航欄是相同的。 – BGecko 2014-10-09 22:13:01

剛試過。圖標靠近正確位置的Text，但它現在位於它下面一點。我改變了左邊：attr，它沒有做任何事情。把它們放在一起，仍然是一樣的，正好對齊文本底部。 – BGecko 2014-10-09 22:16:32

對不起，相對定位是有問題的。我已經更新了我的答案;希望能解決它。 – colonelsanders 2014-10-09 22:20:00

jQuery手機按鈕圖標位置太左了

回答

相關問題