我对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.;
}
答案 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定位类的最佳实践,这样您的规则就不会影响网站中的每个nav
,ul
,li
等。
.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>