Question

如何在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;
}

但它一个在另一个之上（出了什么问题，我试图在openoverflow上设置openid图标）

Answer 1

您首先需要图像然后才能将图像链接到您的位置。

Answer 2

将其a grid：

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

Answer 3

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

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

按照您的意愿设计样式。看一下this链接，在这里你会发现更多jQM GUI元素的例子。这是一个例子：http://jsfiddle.net/Gajotres/YJfzP/

Answer 4

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

display: inline;

或者，

display: inline-block;

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

4 个答案: