Question

我尝试在listview中嵌入一个可折叠的但是它会破坏我的布局：http://dl.dropbox.com/u/17844821/zeug/jquery_mobile_collapsible_break.jpg

怎么了？

这是我的代码：

<!DOCTYPE html> 
<html> 
    <head> 
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>jQMail</title> 
    <link href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" rel="stylesheet" type="text/css" />
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
</head> 
<body> 
<div data-role="page" data-theme="d">
    <div data-role="header" data-theme="d">
        <h1>jQMail</h1>
    </div>
    <ul data-role="listview">
        <li><a href="#inbox">INBOX</a></li>
        <li><a href="#inbox">Sent</a></li>
        <li><a href="#inbox">Trash</a></li>
        <li>
            <h3>Archive</h3>
            <div data-role="collapsible" data-content-theme="d">
                <h3>By date</h3>
                <ul data-role="listview" data-inset="true" data-theme="d">
                    <li><a href="#m2010">2010</a></li>
                    <li><a href="#m2009">2009</a></li>
                    <li><a href="#m2008">2008</a></li>
                </ul>   
            </div>
        </li>
    </ul> 
</div>
</body>
</html>

Answer 1

从jquery.mobile.min.css导入的CSS应用了保证金

.ui-collapsible-content {
  margin: 0 -8px;
  ...

您可以使用CSS覆盖它，在margin样式上添加.ui-collapsible-content，如下所示：

.ui-collapsible-content {
    margin: -9px 0 0 0 ;
}

编辑：如果您只想影响此组件，可以在父div上添加id，并指定CSS路径。例如：

<div id="dateListView" data-role="collapsible" data-content-theme="d"> ...

使用此CSS

div#dateListView.ui-collapsible div.ui-collapsible-content {
    margin: -9px 0 0 0 ;
}

嵌套的可折叠符打破了jQuery Mobile的布局

1 个答案: