0
我正在为我的DofE考察队建立一个网站，但在正常工作时遇到了一些麻烦。当前漂浮在主容器右侧的文本应该位于导航部分的旁边，但是可能会尝试使其成为迄今为止不成功的文本。对此有何想法？文本漂浮到右侧，而不是旁边导航
如果有帮助，我想它是这个样子：W3schools CSS Help Code
@charset "utf-8";
/* CSS Document */
* {
box-sizing: border-box;
}
body {
\t background-color: #EEE;
}
#header {
\t background-color: #66CCFF; \t
\t margin: auto;
\t text-align:center;
\t font-family: Helvetica;
}
#container {
\t background-color: white;
\t width: 800px;
\t margin-left: auto;
\t margin-right: auto; \t
\t font-family: Helvetica;
}
.main {
\t font-family: Helvetica;
\t width: 70%;
\t margin-left: auto;
\t float: right;
\t background-color:#f2f2f2;
\t clear: left;
\t display: inline;
\t /*margin: 1px;*/
}
#main2 {
\t width: 799px;
\t font-family: Helvetica;
\t width: 50%;
\t display: inline;
\t background-color:#f2f2f2;
\t /*margin: 1px;*/
}
#nav{
\t padding: 3px;
\t font-family: Helvetica;
\t list-style-type: none;
}
#nav li a:hover {
\t color: red;
}
#nav li {
\t text-decoration: none;
\t display: block;
\t padding: 5px;
\t margin: 5px;
\t margin-left: 0px;
\t background-color: #dddddd;
\t width: 25%;
}
#nav ul {
list-style-type: none;
margin: 0;
padding: 0;
fl
}
#content {
\t padding:10px;
}
#footer{
\t clear: both;
\t color: white;
\t background-color: grey;
\t text-align: right;
\t padding: 0.5px;
}
#footer-margin{
\t margin: 5px;
}
img {
\t /*margin-left: auto;
\t margin-right: auto;*/
\t text-align:center;
\t border-style: solid;
\t border-width: 1px;
\t border-color: black;
\t clear: right;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DofE:Expedition Aim</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id = "container"><!--start container-->
\t <div id = "header">
<h1>DofE Expedition Aim</h1>
</div>
\t \t <div id = "content">
\t \t <div id = "nav"><!-- start nav tag -->
\t \t <ul>
\t \t \t <li><a href="index.html">Home</a></li>
<li><a href="page_1.html">Our Aim</a></li>
<li><a href="page_2.html">How we acheived it</a></li>
<li><a href="page_3.html">Extra info (tbd)</a></li>
\t \t </ul>
\t </div><!-- nav close tag -->
<div class = "clearfix">
<div class = "main">
<p>This page shows what happened on out DofE expedition and the things that we did when not on expedition.</p>
<p>This includes doing map work, fitness and orginising and running events localy.</p>
<p>On the following pages, you can find the various evidence to show you what we did and how it benefited us. (or didn't)</p>
</div><!-- "main" end tag -->
<!--<div id = "main2">
<p>This is a test of a second column that should float to the right of the other.</p>
</div>-->
</div>
<!-- <div id = "img.1">
<img src="logo.jpg" alt="DofE Logo goes here" height="100" width="73">
</div>-->
\t </div>
\t \t <div id = "footer">
\t \t \t <div id = "footer-margin">
\t \t \t <p>Copyright © Dom Brown 2017</p>
\t \t \t </div>
\t \t </div>
</div>
</body>
</html>
设置你的'content'显示Flex和删除列表的宽度 – Roljhon