在列表标题右侧添加两个按钮

时间:2015-06-19 13:37:28

标签: html jquery-mobile

我尝试将两个<a </a>元素放入右侧的标题中,然后显示<?php echo $row['date']; ?>显示的同一行。现在按钮只在它们之间和日期行之下。我怎样才能解决它,它们与日期在同一行怎么样?

<li id ="listtwo" name="listtwo" data-role="list-divider" role="heading" align="right"  class="ui-li ui-li-divider ui-bar-b ui-li-has-count ui-first-child" ><?php echo $row['date']; ?><a href="index.html" data-role="button" data-icon="delete" data-iconpos="notext">Delete</a><a href="index.html" data-role="button" data-icon="delete" data-iconpos="notext">Delete</a></li> 
                <li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="c" ><div class="ui-btn-inner ui-li"><div class="ui-btn-text"><a class="ui-link-inherit"><p class="ui-li-aside ui-li-desc"><strong><?php echo $row['time']; ?></strong></p>                       
                    <p class="ui-li-desc"><strong><?php echo $row['title']; ?></strong></p>
                    <p class="ui-li-desc"><?php echo $row['text']; ?></p>

                </a></li>

1 个答案:

答案 0 :(得分:0)

您最好使用span标记将它们一个接一个地对齐。我还添加了2个缺失的div!看看修改后的代码。

<li id ="listtwo" name="listtwo" data-role="list-divider" role="heading" align="right"  class="ui-li ui-li-divider ui-bar-b ui-li-has-count ui-first-child" >
    Today
    <a href="index.html" data-role="button" data-icon="delete" data-iconpos="notext">Delete</a>
    <a href="index.html" data-role="button" data-icon="delete" data-iconpos="notext">Delete</a>
</li> 
<li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="c" >
    <div class="ui-btn-inner ui-li">
        <div class="ui-btn-text">
            <a class="ui-link-inherit">
                <p class="ui-li-aside ui-li-desc">
                    <span><strong>Time</strong></span>
                    <span><strong>Title</strong></span>
                    <span>Text</span>
                </p>
            </a>
        </div>
    </div>
</li>

使用一点CSS来相应地设置它们的样式!