大家好，在此先感谢您的帮助和支持!
正在学习编码，基础问题提前致歉。我正在制作一个专门用于我学习编码的网页。我实现了两个侧边栏，但它们重叠导致顶部栏向右推，我该如何纠正这个问题？代码如下。
ul {
list-style-type: none;
margin: 0;
padding 0;
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 99%
}
ul.vertical {
list=-style-type: none;
margin: 0;
padding: 0;
overflow: auto;
background-color: #333;
width: 200px;
position: fixed;
}
li.sidebar {
text-align: center;
border-bottom: 1px solid #555;
}
li:last-child {
border-right: none;
border-bottom: none;
}
li a{
display: block;
color: white;
padding: 14px 16px
text-align center;
text-decoration: none;
font-size: 20px;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #4CAF50;
}<ul>
<li><a class="active" href="#home">Home</a></li>
<li style="float:right"><a class="active" href="#about">About</a></li>
<li style="float:right"><a href="#search">search</a></li>
<li style="float:left"><a href="#login">Login</a></li>
<li style="float:left"><a href="#register">Register</a></li>
</ul>
<ul class="vertical">
<li><a class="active" href="#zero">zero</a></li>
<li style=" sidebar float:right"><a class="active" href="#one">one</a></li>
<li style=" sidebar float:right"><a href="#two">two</a></li>
<li style=" sidebar float:left"><a href="#three">three</a></li>
<li style="sidebar float:left"><a href="#four">four</a></li>
</ul>最佳答案
很高兴您能寻求帮助，这有时会让人感到困惑。但随着你的继续，它会变得更容易。首先，你的一些 CSS 属性写错了。我注意到下面突出显示的三个错误...
ul.vertical {
list=-style-type: none;
}
ul {
padding 0;
}
li a {
padding: 14px 16px
text-align center;
}
后两个缺少冒号和分号。第一个在属性中添加了等号。您应该真正构建您的代码，使其成为阅读和查找错误的最佳选择。我注意到你的间距非常不一致。您还在 html 文档中添加了样式，这是已经使用外部样式表的坏习惯。
为了在两个 div 之间添加间距，您可以对第一个和第二个侧边栏选择器类都使用 margin 属性。我将包含一个示例，您可以使用该示例复制代码并进行研究。
//html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Sidebars</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="sidebar1">
<ul>
<li>About</li>
<li>Search</li>
<li>Login</li>
<li>Register</li>
</ul>
</div>
<div class="sidebar2">
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
</div>
</body>
</html>
//CSS
.sidebar1 {
float: left;
width: 100px;
height: 200px;
margin: 0 5px 0 0;
background-color: grey;
}
.sidebar2 {
float: left;
width: 100px;
height: 200px;
margin: 0 0 0 5px;
background-color: lightgrey;
}
ul {
margin: 0;
}
如您所见，我在页边距中添加了 4 位数字，这四位数字从左到右依次为上-右-下-左。所以你可以看到我在第一个侧边栏的右侧添加了 5px 的边距，在第二个侧边栏的左侧添加了 5px。总共净填充 10px。
我希望这对您有所帮助，并为您提供了一个整洁代码的好例子。 :)
关于html - 如何在水平和垂直侧边栏之间放置间距，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45069006/