Question

好的，我正在网站上工作。我的网站主要内容位于中间，主要内容的左侧我想要一个垂直导航栏，其中包含网站上的不同链接。我知道如何创建一个导航栏并对其进行样式化，但我不知道如果没有导航栏干扰其他网站内容我该如何做到这一点，这里有一个例子：

https://gyazo.com/8f8fc2f7e57e9b419671e6fda603546c

正如您在链接中看到的那样，导航栏的内容高于其他主要内容，因此，我决定添加float：left;到样式表，我最终得到它与主要内容一致，除了它现在是水平的，而不是垂直的。为什么网站会这样做？如何分离网页的不同元素并自由移动它们而不会干扰其他事情？

JSFiddle

HTML：

<DOCTYPE html>
<html lang="en">
<head>
    <title>CSGOMarble</title>
    <link rel="stylesheet" type="text/css" href="homepage.css">
</head>
<body>
<div class="navbar">
  <ul>
    <li>Coin Flip</li>
    <li>About Us</li>
    <li>Contact</li>
  </ul>
</div>
</html>

CSS：

body {
background-color: #999999;
font-family: Arial, Verdana, sans-serif;
margin-top: 50px
}
h1 {
background-color: black;
color:white;
padding-top: 30px;
padding-bottom: 30px;
margin-left: 275px;
margin-right: 275px;
border-radius: 10px;
margin-bottom: 50px;
}
.container{
margin-left: 275px;
margin-right: 275px;

}

li {
list-style-type: none;
float: left;
}

Answer 1

删除

li {float: left;}

并添加

.navbar{float: left}

...将解决您的问题

但我想你只是缺少一些关于布局和html元素定位的基本理解，以及＃34;移动＆＃34;你需要布局的元素是适合你需要的东西，然后它们不会干扰其他东西：）

布局教程：http://www.w3schools.com/html/html_layout.asp
定位教程：http://www.w3schools.com/css/css_positioning.asp

Answer 2

float: left会将所有导航项放在一起（只要有水平空间）。对于垂直菜单，只需在display: block项目上使用li（这是默认值，因此您根本不必在CSS中编写它）。这会将它们放在彼此之下。

要修复窗口中的元素（就像左边的菜单一样），在其上使用position: fixed - 这是相对于屏幕的，所以它不会与其余部分一起滚动。但它会重叠（默认情况下）其他非固定元素，如主要内容，因此您必须放置具有偏移量的元素（例如position: relative; left: 180px;）

垂直导航条

2 个答案: