英文:
How to display menu items in a horizontal line using ASP.NET Menu control?
问题
以下是您的代码的翻译部分：
我正在开发一个ASP.NET Web应用程序，并且正在使用菜单控件创建导航栏。然而，我在显示菜单项时遇到了一个问题，它们以垂直列表的形式显示。
我想要实现以下菜单布局：
Narudžbe | Artikli | Prijevoznici | Kupci | Izvještaji
这是我的代码：
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="LandingPage.aspx.vb" Inherits="Mišković_OMIS_projekt.LandingPage" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style>
.navbar {
background-color: #333;
overflow: hidden;
display: flex;
justify-content: center; /* Align items horizontally */
}
.navbar a {
float: none; /* Remove float property */
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 20px;
}
.navbar a:hover {
background-color: #ddd;
color: black;
}
.logo {
text-align: center;
padding: 20px 0;
}
.logo img {
width: 800px; /* Adjust the width as per your logo's dimensions */
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="navbar">
<asp:Menu ID="MyMenu" runat="server">
<Items>
<asp:MenuItem Text="Narudžbe" Value="~/Stranice/Narudzbe.aspx"></asp:MenuItem>
<asp:MenuItem Text="Artikli" Value="~/Stranice/Artikli.aspx"></asp:MenuItem>
<asp:MenuItem Text="Prijevoznici" Value="~/Stranice/Prijevoznici.aspx"></asp:MenuItem>
<asp:MenuItem Text="Kupci" Value="~/Stranice/Kupci.aspx"></asp:MenuItem>
<asp:MenuItem Text="Izvještaji" Value="~/Stranice/Izvjestaji.aspx"></asp:MenuItem>
</Items>
</asp:Menu>
</div>
<div class="logo">
<img src="Images/logo.png" alt="OMIS Logo" />
</div>
</form>
</body>
</html>
我尝试修改了CSS属性，例如display: flex和float: none，但菜单项仍然以垂直列表的方式显示。如何修改我的CSS或ASP.NET代码以实现所需的菜单项水平布局？
此外，这是VB.NET中的代码：
Public Class LandingPage
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
MyMenu.Items(0).NavigateUrl = "~/Stranice/Narudzbe.aspx"
MyMenu.Items(1).NavigateUrl = "~/Stranice/Artikli.aspx"
MyMenu.Items(2).NavigateUrl = "~/Stranice/Prijevoznici.aspx"
MyMenu.Items(3).NavigateUrl = "~/Stranice/Kupci.aspx"
MyMenu.Items(4).NavigateUrl = "~/Stranice/Izvjestaji.aspx"
End Sub
Protected Sub MyMenu_MenuItemClick(sender As Object, e As MenuEventArgs) Handles MyMenu.MenuItemClick
' Get the selected item's URL
Dim selectedItemUrl As String = MyMenu.SelectedItem.Value
' Redirect to the selected page
Response.Redirect(selectedItemUrl)
End Sub
End Class
希望这有所帮助。
英文:
I am working on an ASP.NET web application, and I'm using the Menu control to create a navigation bar. However, I'm facing an issue with displaying the menu items in a horizontal line. Currently, the menu items are displayed vertically like a list.
I want to achieve the following layout for my menu:
Narudžbe | Artikli | Prijevoznici | Kupci | Izvještaji
Here is my code:
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="LandingPage.aspx.vb" Inherits="Mišković_OMIS_projekt.LandingPage" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style>
.navbar {
background-color: #333;
overflow: hidden;
display: flex;
justify-content: center; /* Align items horizontally */
}
.navbar a {
float: none; /* Remove float property */
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 20px;
}
.navbar a:hover {
background-color: #ddd;
color: black;
}
.logo {
text-align: center;
padding: 20px 0;
}
.logo img {
width: 800px; /* Adjust the width as per your logo's dimensions */
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="navbar">
<asp:Menu ID="MyMenu" runat="server">
<Items>
<asp:MenuItem Text="Narudžbe" Value="~/Stranice/Narudzbe.aspx"></asp:MenuItem>
<asp:MenuItem Text="Artikli" Value="~/Stranice/Artikli.aspx"></asp:MenuItem>
<asp:MenuItem Text="Prijevoznici" Value="~/Stranice/Prijevoznici.aspx"></asp:MenuItem>
<asp:MenuItem Text="Kupci" Value="~/Stranice/Kupci.aspx"></asp:MenuItem>
<asp:MenuItem Text="Izvještaji" Value="~/Stranice/Izvjestaji.aspx"></asp:MenuItem>
</Items>
</asp:Menu>
</div>
<div class="logo">
<img src="Images/logo.png" alt="OMIS Logo" />
</div>
</form>
</body>
</html>
I have tried modifying the CSS properties such as display: flex and float: none, but the menu items are still displayed in a vertical list. How can I modify my CSS or ASP.NET code to achieve the desired horizontal layout for the menu items?
Here is also the code-behind in VB.NET:
Public Class LandingPage
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
MyMenu.Items(0).NavigateUrl = "~/Stranice/Narudzbe.aspx"
MyMenu.Items(1).NavigateUrl = "~/Stranice/Artikli.aspx"
MyMenu.Items(2).NavigateUrl = "~/Stranice/Prijevoznici.aspx"
MyMenu.Items(3).NavigateUrl = "~/Stranice/Kupci.aspx"
MyMenu.Items(4).NavigateUrl = "~/Stranice/Izvjestaji.aspx"
End Sub
Protected Sub MyMenu_MenuItemClick(sender As Object, e As MenuEventArgs) Handles MyMenu.MenuItemClick
' Get the selected item's URL
Dim selectedItemUrl As String = MyMenu.SelectedItem.Value
' Redirect to the selected page
Response.Redirect(selectedItemUrl)
End Sub
End Class
答案1
得分: 0
Here is the translation of the provided code:
尝试这个菜单设置：
如果您在属性表中设置了上述内容，那么您的菜单将变成这样：
<asp:Menu ID="MyMenu" runat="server"
Orientation="Horizontal" RenderingMode="Table">
<Items>
结果如下：
英文:
Try this for the menu settings:
if you set above in property sheet, then your menu becomes this:
<asp:Menu ID="MyMenu" runat="server"
Orientation="Horizontal" RenderingMode="Table">
<Items>
And the result is this:
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论