Question

大家好，先谢谢你的帮助和支持！

我正在学习编码并提前为基本问题道歉。我正在制作一个专门用于学习编码的网页。我实施了两个侧边栏，但它们重叠导致顶部栏向右推，我该如何纠正？代码如下。

＆＃13;

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;

    }

＆＃13;

<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>

＆＃13;

Answer 1

我很高兴你伸出援助之手，有时会让人感到困惑。但随着你的继续，它会变得更容易。首先，你的一些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。

我希望这对你有所帮助，并给你一个干净利落的代码的好例子。：）

如何在水平和垂直侧边栏之间放置间距

1 个答案: