Question

我正在开发我的第一个Jquery Mobile应用程序。我能够让我的第一个面板启动并运行。我基本上想要面板内的链接导航系统。我基本上使用了无序列表（<ul><li>home</li><li>search</li><li>... etc</li></ul>）但是每当我尝试设置下面#header_panel的属性时，例如<li> elemet的宽度或高度，它就不会对页面生效。如有任何帮助，将不胜感激。我想这样做，使每个<li>在彼此之下，并设置字体大小，边框，高度，宽度=面板的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;
}

enter image description here

Answer 1

这个问题让我感到有些困惑，据我所知，你希望你的LI元素不要占据整个面板并浮动到左边。

看看以下是否有帮助。

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

在结束UL标记后，请务必清除浮动。

Answer 2

我创建了一个包含2个面板的fiddle。使用左上角和右上角按钮打开它们。

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

<div data-role="panel" data-display="overlay" data-theme="c" id="header_panel2">
<ul data-role="listview">
    <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 2 STYLES */
#header_panel2 li{
  height: 100px;
  border: 2px solid black;
}
#header_panel2 a{
  font-size: 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;
}

CSS似乎工作正常，你确定你没有在项目的其他地方覆盖它吗？

设计Jquery Mobile Panel的样式

2 个答案: