列卡在左边，没有散开

Question

我不明白为什么我的列会像那样卡在左边而不是散开。

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 &copy; 2019 Joshua Vanyo
    </div>
</body>

</html>

Answer 1

您应该删除这条规则：

nav {
  float: left;
}

原因是您的左右导航位于导航元素内，当您浮动元素时，它的宽度将 "shrink wrap"。

另一个想法是将这两个导航包装在 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><!-- close this tag -->

最后一个 <nav> 应该是 </nav>。

列卡在左边，没有散开

Columns are stuck on the left and not spread out

html

css

format

html-helper

codepen