記述された JQuery ページに表示されるコンテンツには余白がなく、コンテンツはブラウザの端に近く、特に見苦しくなります (以下に示すように)。
コードは次のとおりです。
次のようにコードをコピーします。
<本文>
<form id="form1" runat="server">
<div data-role="ページ" id="ページ">
<div data-role="header" data-theme="b">
<h2>ニュースコンテンツ</h2>
</div>
<div>
<div>
<asp:Image ID="ニュース画像" runat="server" AlternateText="ニュース画像" />
</div>
<div>
<asp:Label ID="lblDetail" runat="server" Text="Label"></asp:Label>
</div>
</div>
<div data-role="フッター" data-theme="d">
<h4>ケータリングに関する相談</h4>
</div>
</div>
</form>
</body>
実際、理由は非常に単純です。つまり、表示されるコンテンツはコンテンツ内に配置されないため、div に data-role="content" を追加するだけです。変更されたコードは次のとおりです。
次のようにコードをコピーします。
<本文>
<form id="form1" runat="server">
<div data-role="ページ" id="ページ">
<div data-role="header" data-theme="b">
<h2>ニュースコンテンツ</h2>
</div>
<div>
<div>
<asp:Image ID="ニュース画像" runat="server" AlternateText="ニュース画像" />
</div>
<div>
<asp:Label ID="lblDetail" runat="server" Text="Label"></asp:Label>
</div>
</div>
<div data-role="フッター" data-theme="d">
<h4>ケータリングに関する相談</h4>
</div>
</div>
</form>
</body>