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

比在你的是/否/可能是 div 中使用它

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

最后在是/否/可能像这样之后清除你的花车：

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

只要确保您使用left: 15px;第 2 项 - 是/否/可能

我的小提琴

于 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 回答