在顶部而不是在侧面显示 asp.net Wizard Control SideBar答案

【问题标题】：Show asp.net Wizard Control SideBar on top instead of on side在顶部而不是在侧面显示 asp.net Wizard Control SideBar
【发布时间】：2017-05-29 06:08:43
【问题描述】：

我目前以编程方式创建了一个向导及其步骤，并且我试图在顶部而不是侧面显示默认侧边栏及其指向每个步骤的链接。这可能吗？

Wizard wiz = new Wizard();
//Do stuff with wizard steps

【问题讨论】：

标签： c# asp.net wizard

【解决方案1】：

使用 CSS 是可能的

ASP.NET 声明性代码

    <asp:Wizard ID="ApplicationWizard" runat="server" DisplaySideBar="True">
        <%-- LAYOUT --%>
        <LayoutTemplate>
            <div>
                <asp:PlaceHolder ID="headerPlaceHolder" runat="server" />
            </div>
            <div id="stepIndicator">
                <asp:PlaceHolder ID="sideBarPlaceHolder" runat="server" />
            </div>
            <div>
                <asp:PlaceHolder ID="WizardStepPlaceHolder" runat="server" />
            </div>
            <div>
                <asp:PlaceHolder ID="navigationPlaceHolder" runat="server" />
            </div>
        </LayoutTemplate>

        <%-- HEADER --%>
        <HeaderTemplate>
            <h1 class="text-center">My Form</h1>
            <%-- TODO: Add your header elements here --%>
        </HeaderTemplate>

        <%-- SIDEBAR --%>
        <SideBarTemplate>
            <ul id="header">
                <asp:ListView ID="SideBarList" runat="server">
                    <ItemTemplate>
                        <li><asp:LinkButton ID="sideBarButton" runat="server" /></li>
                    </ItemTemplate>
                    <SelectedItemTemplate>
                        <li><asp:LinkButton ID="sideBarButton" runat="server" CssClass="active-step" /></li>
                    </SelectedItemTemplate>
                </asp:ListView>
            </ul>
        </SideBarTemplate>

        <%-- Wizard Steps --%>
        <WizardSteps>
            <asp:TemplatedWizardStep ID="AppStep1" runat="server" Title="Step 1">
                <ContentTemplate>
                    <%-- TODO: Add your wizard step elements here --%>
                </ContentTemplate>
            </asp:TemplatedWizardStep>

            <asp:TemplatedWizardStep ID="AppStep2" runat="server" Title="Step 2">
                <ContentTemplate></ContentTemplate>
            </asp:TemplatedWizardStep>

            <asp:TemplatedWizardStep ID="AppStep3" runat="server" Title="Step 3">
                <ContentTemplate></ContentTemplate>
            </asp:TemplatedWizardStep>

            <asp:TemplatedWizardStep ID="AppStep4" runat="server" Title="Step 4">
                <ContentTemplate></ContentTemplate>
            </asp:TemplatedWizardStep>

            <asp:TemplatedWizardStep ID="AppStep5" runat="server" Title="Step 5">
                <ContentTemplate></ContentTemplate>
            </asp:TemplatedWizardStep>
        </WizardSteps>
    </asp:Wizard>

CSS 样式表

#stepIndicator {
    list-style: none;
    margin: 0px;
    padding: 0px;
    text-align: center;
}

#stepIndicator li {
    display: inline-block;
}

#stepIndicator li a {
    text-decoration: none;
    padding: 10px;
    display: block;
}

但是怎么做？？？：

在 SideBar 模板上，创建一个列表元素
在嵌套的lis中，插入你想要的链接按钮
输出将是默认格式（侧边栏）
为#stepIndicator 添加text-align: center 使侧边栏居中
为#stepIndicator li添加display: inline-block以对齐#stepIndicator的元素内联。

【讨论】：