1

如何在 jquery mobile 中在一行中创建三个“喜欢”图像按钮（一个在另一个旁边）？

我试过这样

<body>
    <a class="ui-icon-google" href="#" data-role="ui-li-aside" data-icon="google" data-theme="a"/>
    <a class="ui-icon-facebook" href="#" data-role="ui-li-aside" data-icon="facebook" data-theme="a"/a>
    <a class="ui-icon-twitter" href="#" data-role="ui-li-aside" data-icon="twitte" data-theme="a"/a>
</body>

像CSS一样

.ui-icon-google{
    background-image: url("google.png") !important;
    background-position: 4px 50%;
    background-size: 60px 60px;
    margin-top: -12px !important;
    width: 192px;
    height: 192px;
}

.ui-icon-facebook{
    background-image: url("facebook.png") !important;
    background-position: 4px 50%;
    background-size: 60px 60px;
    margin-top: -12px !important;
    width: 192px;
    height: 192px;
}

.ui-icon-twitter{
    background-image: url("twitter.png") !important;
    background-position: 4px 50%;
    background-size: 60px 60px;
    margin-top: -12px !important;
    width: 192px;
    height: 192px;
}

但它一个在另一个之上（出了什么问题，我正在尝试将 openid 的图标放在 stackoverflow 上）

4

4 回答 4

0

您首先需要图像，然后您可以将图像链接到您的位置。

于 2012-12-28T23:05:00.173 回答
0

使它成为一个网格： 

<div class="ui-grid-b">
     <a class="ui-block-a ui-icon-google" href="#" data-role="ui-li-aside" data-icon="google" data-theme="a"/>
     <a class="ui-block-b ui-icon-facebook" href="#" data-role="ui-li-aside" data-icon="facebook" data-theme="a"/a>
     <a class="ui-block-c ui-icon-twitter" href="#" data-role="ui-li-aside" data-icon="twitte" data-theme="a"/a>
</div>
于 2012-12-28T23:08:11.730 回答
0

只需创建一个内联按钮组：

<div data-role="controlgroup" data-type="horizontal" >
    <a href="index.html" data-role="button" data-icon="arrow-u">Up</a>
    <a href="index.html" data-role="button" data-icon="arrow-d">Down</a>
    <a href="index.html" data-role="button" data-icon="delete">Delete</a>
</div>

随心所欲地设计它。看看这个链接，在这里你会发现更多 jQM GUI 元素的例子。这是一个例子：http: //jsfiddle.net/Gajotres/YJfzP/

于 2012-12-28T23:14:54.530 回答
0

使图像内联或 imline-block 元素。将以下样式添加到 .ui-icon-google、.ui-icon-facebook 和 .ui-icon-twitter：

display: inline;

或者，

display: inline-block;
于 2013-06-24T19:10:44.417 回答