如何使用 C# 在 ASP.NET 中的侧导航栏旁边放置 <div>？答案

【问题标题】：How do I put a <div> beside a side navbar in ASP.NET using C#?如何使用 C# 在 ASP.NET 中的侧导航栏旁边放置 <div>？
【发布时间】：2021-12-28 06:06:58
【问题描述】：

我想在导航栏plan旁边的红色框中插入内容，基本上就像一个典型的侧边导航栏网站。

但我得到的结果是，actual，我想放在导航栏旁边的内容竟然在整个导航栏的下方。

我使用 Visual Studio 2019、ASP.NET 框架和 C# 语言。我检查了我的代码，发现侧导航栏有一个右边距，但我已经相应地调整了它，但它仍然不起作用。

下面显示的代码在home.master 下，而home.aspx 是我的内容中的代码，应该出现在侧面导航栏旁边。

/*DO NOT EDIT--------------------------------------*/

* {
    margin: 0px;
    height:100%;
    font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
}

.sidebar {
    width: 190px;
    margin-right:0;
    padding-right:0;
    background-color: #2a2f3b;
    height: 100%;
    color: #bbc0c7;
    display: flex;
    align-items: center;
    flex-direction: column;
}

.sidebar-top, .sidebar-center, .sidebar-bottom {
    width: 80%;
    padding: 10px 0;
    height: auto;
    display: flex;
    align-items: center;
    margin-bottom: 4px;
    margin-top: 3px;
    border-bottom: 1px solid #4b4b4b;
}

.sidebar-bottom{
    border: none;
    margin:0;
    justify-content: center;
}

#logo {
    margin-right: 10px;
    cursor: pointer;
    padding-left: 9px;
}

.brand {
    font-weight: bold;
    cursor: pointer;
    height:auto;
}

.list {
    list-style: none;
    padding: 0px;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.list-items {
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    padding: 10px;
    border-radius: 10px;
}

.list-item-text a {
    color: #bbc0c7;
    text-decoration: none;
}

.list-item-icon {
    width: 30px;
    font-size: 20px;
}

.list-items:hover, .list-items.active {
    background-color: #374151;
    color: white;
}

@media only screen and (max-width: 768px) {
    .sidebar {
        width: 50px;
        margin-right: 0;
    }

    .brand, .list-item-text, .name-job, #logout {
        display: none;
    }
}

@media only screen and (max-height: 550px) {
    .sidebar {
        width: 50px;
        height: auto;
        margin-right: 0;
    }

    .brand, .list-item-text, .name-job, #logout {
        display: none;
    }
}


.sidebar-bottom {
    bottom:0;
    left:0;
}

.profile {
    position: relative;
    padding: 0;
    width: 100%;
}

.profile-details {
    display: flex;
    align-items: center;
}

#avatar {
    height: 38px;
    width: 38px;
    object-fit: cover;
    border-radius: 12px;
}

.name-job {
    margin-left: 10px;
    height: auto;
}

.name {
    font-size: 14px;
    font-weight: 400;
}

.job {
    font-size: 12px;
}

#logout {
    position: absolute;
    left: 88%;
    bottom: 10px;
    font-size: 20px;
    border-radius: 12px;
    height: 20px;
    cursor: pointer;
}
/*DO NOT EDIT ^^^^^^^^^^--------------------------------------*/

<body>

    <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
    </asp:ContentPlaceHolder>
    <div class="all-content">

        <div class="sidebar">
            <div class="sidebar-top">
                <asp:Image ImageUrl="~/Images/logoicon.png" ID="logo" Height="25px" runat="server" />
                <span class="brand">CoursUs</span>
            </div>

            <div class="sidebar-center">
                <ul class="list">
                    <li class="list-items active">
                        <i class="list-item-icon fab fa-safari"></i>
                        <span class="list-item-text"><a href="#">BrowseCourse</a></span>

                    </li>
                    <li class="list-items">
                        <i class="list-item-icon fas fa-search"></i>
                        <span class="list-item-text"><a href="#">Course Finder</a></span>
                    </li>
                    <li class="list-items">
                        <i class="list-item-icon far fa-comments"></i>
                        <span class="list-item-text"><a href="#">Forum</a></span>
                    </li>
                    <li class="list-items">
                        <i class="list-item-icon far fa-question-circle"></i>
                        <span class="list-item-text"><a href="#">FAQ</a></span>
                    </li>

                    <li class="list-items">
                        <i class="list-item-icon far fa-user"></i>
                        <span class="list-item-text"><a href="#">My Profile</a></span>
                    </li>
                    <li class="list-items">
                        <i class="list-item-icon far fa-gem"></i>
                        <span class="list-item-text"><a href="points.aspx">My Points</a></span>
                    </li>
                    <li class="list-items">
                        <i class="list-item-icon far fa-calendar"></i>
                        <span class="list-item-text"><a href="#">My Appointments</a></span>
                    </li>
                    <li class="list-items">
                        <i class="list-item-icon far fa-folder"></i>
                        <span class="list-item-text"><a href="#">My Drive</a></span>
                    </li>
                    <li class="list-items">
                        <i class="list-item-icon fas fa-graduation-cap"></i>
                        <span class="list-item-text"><a href="#">My Progress</a></span>
                    </li>
                </ul>

            </div>
            <div class="sidebar-bottom">
                <div class="profile">
                    <div class="profile-details">
                        <asp:Image ImageUrl="~/Images/avatar.png" ID="avatar" runat="server" />
                        <div class="name-job">
                            <div class="name">USER</div>
                            <div class="job">Studet</div>
                        </div>
                    </div>
                    <i class="list-item-icon fas fa-sign-out-alt" height="34px" id="logout"></i>
                </div>
            </div>

        </div>


    </div>
    <div class="container-fluid">
        <asp:ContentPlaceHolder ID="ContentPlaceHolder2" runat="server">
            <div></div>
        </asp:ContentPlaceHolder>
    </div>

</body>

【问题讨论】：

标签： c# html css asp.net

【解决方案1】：

您还没有显示.container-fluid 或.all-content 类的定义，所以这有点像猜谜游戏。

但是，您将 .container-fluid div 设置为 .all-content div 的同级，这很可能不是您想要的。如果没有进一步的样式，这两个 div 将默认为 100% 宽度并使用显示块，因此它们会垂直“堆叠”在彼此之上。

如果我不得不猜测，你想移动那个 .container-fluid div 以便你有这个结构：

<div class="all-content">
  <div class="sidebar">
    <!-- Your sidebar goes here -->
  </div>
  <div class="container-fluid">
    <asp:ContentPlaceHolder ID="ContentPlaceHolder2" runat="server">
    </asp:ContentPlaceHolder>
  </div>
</div>

为了清楚起见，您仍然需要在 .container-fluid 上定义一个显示/宽度才能使其工作。

【讨论】：