パネルコントロールで改行しないようにするコードを紹介します。
パネルコントロールを配置した場合、デフォルトの設定ではパネルが改行される表示になります。
この記事ではパネルの改行をしないようにするコードを紹介します。
CSSのdisplayスタイルをinline-blockに変更して改行しない動作にします。inline-blockの詳細についてはこちらの記事を参照してください。
デフォルトの動作を確認します。ASP.NET アプリケーションを作成し、下記のWebフォームを実装します。
.StandardPanel {
width:240px;
height:64px;
border:1px #ff6a00 solid;
}
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="SimplePanel.aspx.cs" Inherits="PanelDemo.SimplePanel" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" href="SimplePanel.css" />
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Panel CssClass="StandardPanel" ID="Panel1" runat="server">パネル1</asp:Panel>
<asp:Panel CssClass="StandardPanel" ID="Panel2" runat="server">パネル2</asp:Panel>
<asp:Panel CssClass="StandardPanel" ID="Panel3" runat="server">パネル3</asp:Panel>
</div>
</form>
</body>
</html>
プロジェクトを実行し、上記のWebフォームのページをWebブラウザで表示します。下図のページが表示されます。Panelごとに改行され、Panelコントロールが縦にならんで
表示されてることが確認できます。
displayプロパティに inline-block を設定し、Panelの改行をしない動作にするコードを紹介します。
以下のコードを記述します。
.NoWrapPanel {
width: 240px;
height: 64px;
border: 1px #ff6a00 solid;
display:inline-block;
}
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="SimplePanelNowrap.aspx.cs" Inherits="PanelDemo.SimplePanelNowrap" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" href="SimplePanel.css" />
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Panel CssClass="NoWrapPanel" ID="Panel1" runat="server">パネル1</asp:Panel>
<asp:Panel CssClass="NoWrapPanel" ID="Panel2" runat="server">パネル2</asp:Panel>
<asp:Panel CssClass="NoWrapPanel" ID="Panel3" runat="server">パネル3</asp:Panel>
</div>
</form>
</body>
</html>
プロジェクトを実行し、上記のWebフォームを表示します。下図のページが表示されます。Panelコントロールごとの改行が無くなり、Panelコントロールが横並びで
表示されることが確認できます。
参考として、display プロパティを inline に設定した場合の表示です。
.InlinePanel {
width: 240px;
height: 64px;
border: 1px #ff6a00 solid;
display: inline;
}
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="SimplePanelInline.aspx.cs" Inherits="PanelDemo.SimplePanelInline" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" href="SimplePanel.css" />
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Panel CssClass="InlinePanel" ID="Panel1" runat="server">パネル1</asp:Panel>
<asp:Panel CssClass="InlinePanel" ID="Panel2" runat="server">パネル2</asp:Panel>
<asp:Panel CssClass="InlinePanel" ID="Panel3" runat="server">パネル3</asp:Panel>
</div>
</form>
</body>
</html>
上記のWebフォームのページをWebブラウザで表示します。下図のページが表示されます。
inline要素としての表示になるため、width, height プロパティが無視されることが確認できます。
