更改导航栏位置

时间:2019-03-15 21:13:59

标签: html css

我对HTML和CSS完全陌生。我想在左侧增加导航栏。

现在这也是有关我的意思https://prnt.sc/myh7gm的屏幕截图 我想把它向左移几px / cm,就像你在这里看到的那样 https://prnt.sc/myh75s

我的代码

<body>
<header>
<nav>
    <ul>
    <li><a href="contact.html">Contact</a></li>
    <li><a href="portfolio.html">Portfolio</a></li>
    <li><a href="aboutme.html">About me</a></li>
    <li><a href="index.html">Home</a></li>
    </ul>
</nav>
</header>

CSS

    /* navigation bar */

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

li {
    float: right;
}

li a {
    display: block;
    color: rgb(0, 0, 0);
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover:not(.active) {
    opacity: 0.;
  }

2 个答案:

答案 0 :(得分:1)

尝试在CSS中添加填充

.navbar {
padding-left: 20px
/* any other rules you wnat to add*/
}

或左:20px
我看不到您的链接。

转到https://www.w3schools.com/howto/howto_css_navbar_icon.asp了解更多想法。

答案 1 :(得分:0)

Margin-right是执行此操作的好方法。检出我添加到nav元素中的类。使用CSS定位类的最佳实践,这样您的规则就不会影响网站中的每个navulli等。

.main-navigation {
  margin-right: 50px; // whatever distance from the right you want
}

.main-navigation ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: transparent;
}

.main-navigation li {
    float: right;
}

.main-navigation li a {
    display: block;
    color: rgb(0, 0, 0);
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

.main-navigation li a:hover:not(.active) {
    opacity: 0.;
  }
<body>
<header>
<nav class="main-navigation">
    <ul>
    <li><a href="contact.html">Contact</a></li>
    <li><a href="portfolio.html">Portfolio</a></li>
    <li><a href="aboutme.html">About me</a></li>
    <li><a href="index.html">Home</a></li>
    </ul>
</nav>
</header>
</body>