时间戳

首页 > 解决方案 > 的效果

标记下一个兄弟姐妹，即 ul>li

html - 的效果
标记下一个兄弟姐妹，即 ul>li

问题描述

<!DOCTYPE html>
<html>

<head>
    <title>technical documentation page</title>
    <style>
        ul:nth-child(2){
              float: left;
              position: fixed;
              width:auto;
        
    }
             nav>ul li{
             border: 1px solid gray;
             padding: 25px;
    }
    </style>
</head>

<body>
    <nav id="navbar">
        <header>
            <h1>SSAGUJARAT WEB-TECHNICAL EXPLANATION</h1>
        </header>
        <hr>
        <ul>
            <li><a href="#LOGIN" class="nav-link">LOGIN</a></li>
            <li><a href="#MENUBAR" class="nav-link">MENUBAR</a></li>
            <li><a href="#MASIKPATRAK" class="nav-link">MASIKPATRAK</a></li>
            <li><a href="#PAGARBILL" class="nav-link">PAGARBILL</a></li>
            <li><a href="#SHORTCUTS" class="nav-link">SHORTCUTS</a></li>
        </ul>
    </nav>
</body>

</html>

我的导航栏浮动在左侧并用css固定，但是当我添加hr标签波纹管标题时，导航栏和导航栏内的每个li都采用全宽边框，导航栏缺少左侧浮动并且缺少固定位置。为什么？？

标签： htmlcss

解决方案

当然，ul将不再有 CSS，因为您的目标是ul:nth-child(2)在添加 hr 之后它应该是ul:nth-child(3)

 ul:nth-child(3){
     float: left;
     position: fixed;
     width:auto;
}
 nav>ul li{
     border: 1px solid gray;
     padding: 25px;
}
<!DOCTYPE html>
<html>

<head>
    <title>technical documentation page</title>
</head>

<body>
    <nav id="navbar">
        <header>
            <h1>SSAGUJARAT WEB-TECHNICAL EXPLANATION</h1>
        </header>
        <hr>
        <ul>
            <li><a href="#LOGIN" class="nav-link">LOGIN</a></li>
            <li><a href="#MENUBAR" class="nav-link">MENUBAR</a></li>
            <li><a href="#MASIKPATRAK" class="nav-link">MASIKPATRAK</a></li>
            <li><a href="#PAGARBILL" class="nav-link">PAGARBILL</a></li>
            <li><a href="#SHORTCUTS" class="nav-link">SHORTCUTS</a></li>
        </ul>
    </nav>
</body>

</html>

建议：

我不知道您的完整代码，但在您的情况下，您不必使用nth-child您可以轻松使用ul或考虑将 a 添加class到您的ul（更好）然后在您的 CSS 中定位它，这是一个示例：

 ul.nav-items {
     float: left;
     position: fixed;
     width:auto;
}
 nav>ul.nav-items li{
     border: 1px solid gray;
     padding: 25px;
}
<!DOCTYPE html>
<html>

<head>
    <title>technical documentation page</title>
</head>

<body>
    <nav id="navbar">
        <header>
            <h1>SSAGUJARAT WEB-TECHNICAL EXPLANATION</h1>
        </header>
        <hr>
        <ul class="nav-items">
            <li><a href="#LOGIN" class="nav-link">LOGIN</a></li>
            <li><a href="#MENUBAR" class="nav-link">MENUBAR</a></li>
            <li><a href="#MASIKPATRAK" class="nav-link">MASIKPATRAK</a></li>
            <li><a href="#PAGARBILL" class="nav-link">PAGARBILL</a></li>
            <li><a href="#SHORTCUTS" class="nav-link">SHORTCUTS</a></li>
        </ul>
    </nav>
</body>

</html>

推荐阅读