Question

我需要在屏幕左侧创建导航栏，然后在导航栏旁边创建文本div。我只是设法使文本div一直到屏幕的右侧。到目前为止，我有这个：

HTML

<head>

<link rel = "stylesheet" type = "text/css" href = "styles.css">
<title>Homepage</title>

</head>

<body>
<div id = "header">
    <h1>Homepage - origins of World Wide Web and the Internet</h1>
</div>
<div id = "wrapper">
    <div id = "navbar">
        <ul>
        <li><a class = "active" href="index.html">HOMEPAGE</a></li>
        <li><a href="news.asp">INTERNET PIONEERS</a></li>
        <li><a href="contact.asp">HTTP</a></li>
        <li><a href="about.asp">TERMINOLOGY</a></li>
        <li><a href="about.asp">REFERENCES</a></li>
        </ul>
    </div>

    <div id = "text">
        <h2>World Wide Web</h2>

    </div>
</div>

CSS：

#header {


width: 97%;
  height: 70px;
  background: black;
  position: relative;
  border: 5px solid white;  
  margin: 20px;
}

#header:after {
  content: '';
  position: absolute;
  top: -15px;
  left: -15px;
  right: -15px;
  bottom: -15px;
  background: #600202;
  z-index: -1;
}

#header h1 {
    font-family: Arial;
    color: white;
    text-align: center;
}



#navbar {
    padding-left: 8px;
    margin:5px;
}

#navbar ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 15%;
    background-color: #f1f1f1; 
    position: fixed; 
    overflow: auto;
    border: 5px solid black;
    border-radius: 3%;
    font-family: Arial;
    font-weight: bold;
}

#navbar li a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
}

#navbar li a:hover {
    background-color: #555;
    color: white;
}

#navbar li a.active {
    background-color: #600202;
    color: white;
}


#navbar li {
    text-align: center;
    border-bottom: 5px solid black;
}

#navbar li:last-child {
    border-bottom: none;
}

#text {
    border:1px solid black;

}

Answer 1

我用Javier Rey编写的代码尝试了这个，它完全按照你想要的方式工作。尝试暂时删除与nav和div相关的样式，因为边距和填充。

Answer 2

#navbar {
    padding-left: 8px;
    margin:5px;
    float: left;
}

#navbar ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    /*width: 15%;*/
    background-color: #f1f1f1;
    /*position: fixed;*/
    overflow: auto;
    border: 5px solid black;
    border-radius: 3%;
    font-family: Arial;
    font-weight: bold;
}

#text {
    border:1px solid black;
    float: left;
}

Answer 3

正如Javier已经提到的，由于position:fixed和float:left混合存在问题，因此从文档流中删除了元素，因此无法正确计算宽度百分比。

我们需要先解决一些代码问题：

1。）position:fixed是#navbar ul的一部分但是如果您要滚动，导航栏容器也会随文本一起滚动，固定导航将随其父容器一起滚动

2.。）宽度在ul元素中定义（防止元素拉伸到适当的长度），元素本身定位固定，这就是父元素本身没有宽度的原因（如元素不会呈现为周围文档流的一部分），这就是使用#text

时#navbar元素位于float:left元素下方的原因

一个解决方案......

...可能是将position: fixed移动到#navbar元素，然后为#text元素定义固定的左边距：

#text {
  margin-left: 240px;
  border: 1px solid black;
}

#navbar {
  padding-left: 8px;
  margin: 5px;
  width: 220px;
  position: fixed;
}

#navbar ul {
  list-style-type: none;
  margin: 0;
  padding: 0;  
  background-color: #f1f1f1;
  border: 5px solid black;
  border-radius: 3%;
  font-family: Arial;
  font-weight: bold;
}

我创建了一个包含完整更改here的小提琴。

如何让2个div彼此相邻？

3 个答案: