0

初めての Jquery Mobile アプリケーションを開発しています。最初のパネルを起動して実行することができました。基本的に、パネル内のリンクのナビゲーション システムが必要です。基本的に順序なしリスト ( <ul><li>home</li><li>search</li><li>... etc</li></ul>) を使用しますが、要素の幅や高さなど、下の #header_panel の属性をスタイルしようとすると<li>、ページに反映されません。どんな助けでも大歓迎です。<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;
}

ここに画像の説明を入力

4

2 に答える 2

0

2 つのパネルでフィドルを作成しました。左上と右上のボタンを使用して開きます。

右上のボタンは、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 は正常に動作しているようですが、プロジェクトの他の場所でオーバーライドしていませんか?

于 2013-09-27T15:09:43.460 に答える