设置Jquery移动面板的样式

我正在开发我的第一个Jquery移动应用程序。我能够启动并运行我的第一个面板。我基本上希望在面板内有一个链接导航系统。我基本上使用无序列表（

主页
搜索
等

），但每当我尝试设置下方#标题面板的属性（如

元素的宽度或高度）时，它不会在页面上生效。如果您有任何帮助，我们将不胜感激。我希望使每个
都位于彼此下方，并设置字体大小、边框、高度、宽度=面板的100%等。填充生效，但高度和宽度无效。任何帮助都将不胜感激。下面是我的代码：

<div data-role="panel" data-display="overlay" id="header_panel">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Articles</a></li>
                <li><a href="#">Music</a></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>

<div data-role="panel" data-display="overlay" id="header_panel">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Articles</a></li>
                <li><a href="#">Music</a></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>

#header_panel li{
width: 200px;
height: 100px;
padding: 10px;
}
























#标题(小标题){
宽度：200px；
高度：100px；
填充：10px；
}

这个问题让我有点困惑，据我所知，您希望您的LI元素不要占据整个面板并向左浮动

看看下面的方法是否有用

#header_panel li{
    width: 200px;
    height: 100px;
    padding: 10px;
    display:inline-block;
    float:left;
}

结束UL标签后，请确保清除您的浮动。
我创建了一个带有2个面板的浮动。使用左上角和右上角按钮打开它们

右上角的按钮使用UL上的data role=“listview”获取标准jQM垂直列表。然后使用CSS进一步更改样式（字体、高度、边框等）：









/*面板2样式*/
#标题2李{
高度：100px；
边框：2件纯黑；
}
#标题板2 a{
字号：2em；
}

左上角的按钮仅使用CSS设置列表样式：

<div data-role="panel" data-display="overlay" data-theme="c" id="header_panel">
<ul >
    <li><a href="#">Home</a></li>
    <li><a href="#">Articles</a></li>
    <li><a href="#">Music</a></li>
    <li></li>
    <li></li>
</ul>
</div>

/* PANEL 1 STYLES */
#header_panel ul{
  list-style-type: none;
}
#header_panel li{
  width: 150px;
  height: 100px;
  padding: 10px;
  border: 1px solid black;
}
#header_panel a{
  font-size: 2em;
}









/*面板1样式*/
#收割台面板{
列表样式类型：无；
}
#标题(小标题){
宽度：150px；
高度：100px；
填充：10px；
边框：1px纯黑；
}
#标题面板a{
字号：2em；
}

CSS似乎工作正常，您确定您没有在项目的其他地方覆盖它吗？
是的，您是对的，这不是jquery mobile的问题，而是我的HTML标记的问题
<div data-role="panel" data-display="overlay" data-theme="c" id="header_panel">
<ul >
    <li><a href="#">Home</a></li>
    <li><a href="#">Articles</a></li>
    <li><a href="#">Music</a></li>
    <li></li>
    <li></li>
</ul>
</div>

/* PANEL 1 STYLES */
#header_panel ul{
  list-style-type: none;
}
#header_panel li{
  width: 150px;
  height: 100px;
  padding: 10px;
  border: 1px solid black;
}
#header_panel a{
  font-size: 2em;
}