Question

我已经为ul和li制作了自己的风格，并且工作正常。

在右侧有一个局部视图，与所有东西对齐。

但现在我意识到影响了不同地区的其他ul li。所以我添加了一个课程.menuHeader。

    .menuHeader ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: black;
    }

    .menuHeader li {
        float: left;
        text-decoration: none;
    }

        .menuHeader li a {
            display: block;
            color: white;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
        }

            .menuHeader  li a:hover:not(.active) {
                background-color: #B0B0B0;
                color: black;
                text-decoration: none;
            }

普通链接仍然正常。

<ul class="menuHeader">
    <li class="menuHeader">@Html.ActionLink("Main", "Index", "Home", null, new { @class = activeHome })</li>
    <li class="menuHeader">@Html.ActionLink("Tracker", "Index", "Tree", null, new { @class = activeTracker })</li>
    <li class="menuHeader">@Html.ActionLink("Contact", "Contact", "Home", null, new { @class = activeContact })</li>
    <li class="menuHeader">@Html.ActionLink("About", "About", "Home", null, new { @class = activeAbout })</li>

但是对于局部视图isnt并且还出现项目列表的点。所以看起来我需要在那里定义一些其他属性。知道缺少什么吗？

using (Html.BeginForm("LogOff", "Account", FormMethod.Post, new { id = "logoutForm" }))
{
    @Html.AntiForgeryToken()

<ul class="menuHeader">
    <li id="login_area1" class="menuHeader">
        @Html.ActionLink(strHello, "Index", "Manage", routeValues: null, htmlAttributes: new { title = "Manage" })
    </li>
    <li class="menuHeader">
        <a href="javascript:document.getElementById('logoutForm').submit()" id="logoutLink" style="color:red">
            Log off
            <img src="@Url.Content("~/Content/Logout-icon-door.png")">
        </a>
    </li>
</ul>
}

Answer 1

你不应该为ul和li

拥有相同的课程

加上这个：.menuHeader ul {说父母会有一个类.menuHeader有一个孩子的ul，这不是你的代码所拥有的。

应该只是.menuHeader

＆＃13;

.menuHeader {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: black;
}
.menuHeader li {
  float: left;
  text-decoration: none;
}
.menuHeader li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
.menuHeader li a:hover:not(.active) {
  background-color: #B0B0B0;
  color: black;
  text-decoration: none;
}

＆＃13;

<ul class="menuHeader">
  <li class="menuHeaderItem">
    <a class="active" href="#">asdas</a>
  </li>
  <li class="menuHeaderItem">
    <a href="#">asdas</a>
  </li>
  <li class="menuHeaderItem">
    <a href="#">asdasda</a>
  </li>
  <li class="menuHeaderItem">
    <a href="#">asdasda</a>
  </li>
</ul>

＆＃13;

如何使我的ul风格仅适用于一个类

1 个答案: