gpt4 book ai didi

html - 将导航转换为垂直

转载 作者:行者123 更新时间:2023-11-27 22:40:05 26 4
gpt4 key购买 nike

我刚刚测试了一个 ASP.MVC 2 元素。请看图片。 image

相关的CSS:

/* TAB MENU   
----------------------------------------------------------*/
ul#menu
{
border-bottom: 1px #5C87B2 solid;
padding: 0 0 2px;

margin: 0;
text-align: right;
}

ul#menu li
{

list-style: none;

}

ul#menu li a
{
padding: 10px 20px;
font-weight: bold;
text-decoration: none;
line-height: 2.8em;
background-color: #e8eef4;
color: #034af3;
}

ul#menu li a:hover
{
background-color: #fff;
text-decoration: none;
}

ul#menu li a:active
{
background-color: #a6e2a6;
text-decoration: none;
}

ul#menu li.selected a
{
background-color: #fff;
color: #000;
}

我想将它从水平转换为垂直,我尝试的是移除每个 block 并进行测试,但没有成功。

html:

<body>
<div class="page">

<div id="header">


<div id="logindisplay">
<% Html.RenderPartial("LogOnUserControl"); %>
</div>

<div id="menucontainer">

<ul id="menu">
<li><%: Html.ActionLink("Home", "Index", "Home")%></li>
<li><%: Html.ActionLink("About", "About", "Home")%></li>
</ul>
<div id="title">
<h1>WSTEST</h1>
</div>
</div>
</div>

<div id="main">
<asp:ContentPlaceHolder ID="MainContent" runat="server" />

<div id="footer">
</div>
</div>
</div>

谢谢。

最佳答案

试试这个:

ul#menu li {
display: block;
list-style: none;
}

原来是display: inline,改成display: block;应该可以了

希望对您有所帮助!

关于html - 将导航转换为垂直,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11436582/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com