我需要在屏幕左侧制作导航栏，并在导航栏旁边制作文本 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;
}
最佳答案
我用 Javier Rey 编写的代码进行了尝试，它完全按照您想要的方式工作。尝试暂时删除与 nav 和 div 相关的样式，这是因为边距和填充。
关于html - 我怎样才能让2个div彼此相邻？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40318641/