0

アイテムのリストがありますhttp://jsfiddle.net/2Veve/5/ ボタンをテキストの右側に配置して、スペースをとらないようにします。

助言がありますか？

ありがとう

4

3 に答える 3

2

前の要素float:leftにスタイルを追加してみてください。<a>これにより、それらが水平方向に整列し、垂直方向のスペースが少なくなります。

  <a href="#" style="width: 10%;float:left;">
    <h3>Item 1</h3>
    <p>Monday</p>
  </a>
 <div data-type="horizontal" data-role="controlgroup" class="ui-btn-right">
    <a href="index.html" data-role="button">Yes</a>
    <a href="index.html" data-role="button">No</a>
    <a href="index.html" data-role="button">Maybe</a>
  </div>

このリンクを確認してください

于 2012-10-06T13:22:03.720 に答える
1

このようにして、リンクを左にフロートさせ、フロートをクリアすることができます

これをあなたのアイテムに使用してください

style="float: left;"

これを yes/no/may be div で使用するよりも

style="position: relative; top: 20px;"

最後に、yes/no/may like this の後にフロートをクリアします:

<div style="clear: both;"></div>

項目 2 には必ず使用left: 15px;してください - はい/いいえ/かもしれません

私のフィドル

于 2012-10-06T13:02:51.880 に答える
0

これを試してみてください..

出力は以下のようになります

ここに画像の説明を入力 

        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" />
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script>
    </head>
    <body id="my">

<style>
a.ui-link-inherit{ float:left; }
div.ui-btn-righ{ float:left; }
.ui-btn-text{ overflow:hidden; }
</style>
<div data-role="page">
<div data-role="header">
<h1>Kitcat</h1>
<a href="/" data-icon="home" data-iconpos="notext" rel="external" data-direction="reverse">Home</a>
</div>
    <div data-role="content">
        <ul data-role="listview" data-inset="true">
            <li data-role="list-divider">
                <h3>
                    Top Level</h3>
                <p>06 October 2012</p>
            </li>
                    <li data-role="list-divider">Item Header</li>                    
                        <li>
                            <a href="#"><h3>Item 1</h3>

                            <p>Monday</p>
                                            </a>
                            <div data-type="horizontal" data-role="controlgroup" class="ui-btn-right">  
                            <a href="index.html" data-role="button">Yes</a>
                            <a href="index.html" data-role="button">No</a>
                            <a href="index.html" data-role="button">Maybe</a>
                            </div>

                            <a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">Purchase album</a>
                        </li>
                        <li>
                            <a href="#">
                            <h3>Item 2</h3>

                            <p>Doonday</p>
                                </a>
                            <div style="width:50%" data-type="horizontal" data-role="controlgroup" class="ui-btn-right">  
                            <a href="index.html" data-role="button">Yes</a>
                            <a href="index.html" data-role="button">No</a>
                            <a href="index.html" data-role="button">Maybe</a>
                            </div>

                        </li>
        </ul>
    </div>
    <div data-role="footer">
        <a data-rel="back">Back</a>
    </div>
</div>


    </body>
</html>
于 2012-10-06T13:08:10.823 に答える