Question

我试图自定义列表项的布局。在右侧，我想保留一组2个按钮（编辑，删除）和一个复选框（启用）。在左侧，剩余区域应填充描述性内容。像这样。

[------------ sizing area ------------][fixed width]

我尝试了ui-grid-layout，但我只能定义宽度的比例，例如。 80％-20％。

<ul data-role="listview">
    <li>
        <div class="ui-grid-c">
            <div class="ui-block-a" style="width:60%;">
                content                   
            </div>
            <div class="ui-block-b" style="width:20%;">
                <input id="enable1" type="checkbox" value="true" class="custom"/><label for="enable1">Enabled</label>
            </div>
            <div class="ui-block-c" style="width:10%;">                        
                <a id="edit1" href="" data-role="button" data-icon="gear" data-iconpos="notext">Edit</a>
            </div>
            <div class="ui-block-d" style="width:10%;">
                <a id="delete1" href="" data-role="button" data-icon="delete" data-iconpos="notext">Delete</a>
            </div>
        </div>
    </li>
</ul>

根据要求提供代码的jsfiddle： http://jsfiddle.net/qN7P6/

Answer 1

我想出了如何解决这个问题。基本上我在一个单独的div中添加了内容，并且在带有float:right的div中的3个动作添加了ui-grid-。为了正确对齐，我增加了一些余量。

我调整了示例，我将原始代码保留在顶部<ul>，新代码位于<ul>下方。 http://jsfiddle.net/qN7P6/1/

<ul data-role="listview">
    <li style="height:28px;">
        <div>adjusted content</div>
            <div class="rightbuttons">
            <div class="ui-grid-a">
                <div class="ui-block-a" style="width:62%;">
                    <label data-inline="true"><input type="checkbox" data-inline="true" />Enable</label>
                </div>
                <div class="ui-block-b" style="width:38%; margin-top:5px;">
                    <a id="edit1" href="" data-role="button" data-icon="delete" data-iconpos="notext" data-inline="true">Delete</a>
                    <a id="delete1" href="" data-role="button" data-icon="arrow-r" data-iconpos="notext" data-inline="true">Edit</a>
                </div>
            </div>
        </div>
    </li>
</ul>

的CSS：

.rightbuttons {
    float:right;
    width:210px;
    margin-top:-36px;
}

我知道，所有样式属性都应该移动到css来清理。但是我会把它留给读者。

在右侧自定义具有固定元素集的列表项

1 个答案: