1

jquery mobileで3つの「いいね」の画像ボタンを1行に（並べて）作成するにはどうすればよいですか？

私はこのように試しました

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

しかし、それは上下に並んでいます（何が問題なのか、stackoverflowのようにopenidのアイコンを配置しようとしています）

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>

必要に応じてスタイルを設定します。このリンクを見てください。ここには、jQMGUI要素のさらに多くの例があります。次に例を示します：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 に答える