我无法弄清楚为什么我的列被卡在左边而不是分布。
nav {
float: left;
}
nav ul {
margin: 0;
padding: 10px;
list-style: none;
}
nav li {
display: inline-block;
margin-left: 70px;
padding-top: 3px;
position: relative;
}
nav a {
color: #ffffff;
text-decoration: none;
text-transform: uppercase;
font-size: 20px;
}
nav a:hover {
color: #59b4ff;
}
nav a:before {
content:'';
display: block;
height: 1px;
width: 100%;
background-color: #ffffff;
position: absolute;
top: 0;
width: 0%;
transition: all ease-in-out 225ms;
}
nav a:hover::before {
width: 100%;
}
nav::after {
content: '';
display: table;
clear: both;
}
body {
font-family: Arial, Helvetica, sans-serif;
padding: 20px;
background: #3d3d3d;
}
.topnav {
float: right;
overflow: hidden;
background-color: none;
}
.topnav a {
float: left;
display: block;
color: rgb(255, 255, 255);
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: rgb(255, 255, 255);
}
.topnav a.active {
background-color: rgb(14, 110, 189);
}
.topnav .search-container {
float: right;
}
.topnav input[type=text] {
padding: 6px;
margin-top: 8px;
font-size: 17px;
border: none;
}
.topnav .search-container button {
float: right;
padding: 6px 10px;
margin-top: 8px;
margin-right: 16px;
background: #59b4ff;
font-size: 17px;
border: none;
cursor: pointer;
}
.topnav .search-container button:hover {
background: rgb(255, 185, 185);
}
@media screen and (max-width: 600px) {
.topnav .search-container {
float: none;
}
.topnav a, .topnav input[type=text], .topnav .search-container button {
float: none;
display: block;
text-align: left;
width: 100%;
margin: none;
padding: none;
}
.topnav input[type=text] {
border: 1px solid rgb(255, 255, 255);
}}
/* Create two unequal columns that floats next to each other */
/* Left column */
.leftcolumn {
float: left;
width: 70%;
}
/* Right column */
.rightcolumn {
float: right;
width: 25%;
padding-left: 20px;
}
/* Fake image */
.fakeimg {
background-color: #aaa;
width: 100%;
padding: 20px;
}
/* Add a card effect for articles */
.card {
background-color: white;
padding: 20px;
margin-top: 20px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Copyright Information */
.footer {
background-color: rgb(116, 116, 116);
color: rgb(255, 255, 255);
text-align: center;
width: 100%;
height: 30;
clear: both;
padding: 10px 0px 10px 0px;
}<!DOCTYPE HTML>
<html lang="en">
<head>
<!-- META TAGS-->
<meta charset="UTF-8">
<meta name="description" content="Gamer Hub is a place for gamers to connect, compete, speedrun and show off their skills.">
<meta name="author" content="Joshua Vanyo">
<meta name="keywords" content="Gamer, Hub, Social, Network, Speedrunning, Challenges, Achievements">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- LINKS -->
<link href="https://fonts.googleapis.com/css?family=Work+Sans:300">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="style.css">
<!-- SCRIPTS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script>
<script src="script.js"></script>
<title>Gamer Hub</title>
</head>
<body>
<!-- TOP NAVIGATION PANEL -->
<div class="topnav">
<div class="search-container">
<form action="/action_page.php">
<input type="text" placeholder="Browse..." name="search">
<button type="submit">Submit</button>
</form>
</div>
</div>
<nav>
<ul>
<li><a href="Profile.html">Profile</a></li>
<li><a href="Profile.html">Stats</a></li>
<li><a href="Friends.html">Friends</a></li>
<li><a href="Profile.html">Leaderboards</a></li>
<li><a href="Profile.html">Tournaments</a></li>
<li><a href="Profile.html">Explore</a></li>
</ul>
<nav>
</div>
<!-- COLUMNS -->
<br><br><br>
<div class="row">
<div class="leftcolumn">
<div class="card">
<h2>TITLE HEADING</h2>
<h5>Title description, Dec 7, 2017</h5>
<div class="fakeimg" style="height:200px;">Image</div>
<p>Some text..</p>
</div>
<div class="card">
<h2>TITLE HEADING</h2>
<h5>Title description, Sep 2, 2017</h5>
<div class="fakeimg" style="height:200px;">Image</div>
<p>Some text..</p>
</div>
</div>
<div class="rightcolumn">
<div class="card">
<h2>About Me</h2>
<div class="fakeimg" style="height:100px;">Image</div>
<p>Some text about me in culpa qui officia deserunt mollit anim..</p>
</div>
<div class="card">
<h3>Popular Post</h3>
<div class="fakeimg">Image</div><br>
<div class="fakeimg">Image</div><br>
<div class="fakeimg">Image</div>
</div>
<div class="card">
<h3>Follow Me</h3>
<p>Some text..</p>
</div>
</div>
</div>
<!-- FOOTER -->
<div class="footer">
Copyright © 2019 Joshua Vanyo
</div>
</body>
</html>您应该删除此规则：
nav {
float: left;
}
原因是您的左和右NAV位于NAV元素内，当您漂浮一个元素时，它将"缩小"其宽度。
另一个想法是将这两个NAV包裹在DIV而不是NAV元素中。
更新：有一个未关闭的标签：
<nav>
<ul>
<li><a href="Profile.html">Profile</a></li>
<li><a href="Profile.html">Stats</a></li>
<li><a href="Friends.html">Friends</a></li>
<li><a href="Profile.html">Leaderboards</a></li>
<li><a href="Profile.html">Tournaments</a></li>
<li><a href="Profile.html">Explore</a></li>
</ul>
<nav><!-- close this tag -->
最后一个<nav>应该是</nav>。