所以我一直在创建一个网页，并尝试使用无序列表，但它不起作用，只是以灰色背景显示为单个字符串。
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
</style>
<meta charset="utf-8">
<link rel="stylesheet" href="project file 1.css">
<link rel="stylesheet" href="style.css">
<title>My Project
</title>
</head>
<body>
<div id="wrapper">
<div id="nav">
<nav>
<ul>
<li>
<a href="project.html">Home Page
</a>
</li>
<li>
<a href="projectpage.html">Project Page
</a>
</li>
<li>
<a href="cvpage.html">CV page
</a>
</li>
<li>
<a href="contactpage.html">Contact Me
</a>
</li>
</ul>
</nav>
<h1>
</h1>
</div>
<header>
<h1>
<U> Home
<span style="color:red">Page
</span>
</U>
</h1>
</header>
<!--navigation bar -->
<div class="box one">
<h2>
<U>Hobbies
</U>
</h2>
<p>These are just a few of hobbies but these are the ones that take up the most time
</p>
<ul>
<li>Football</li>
<li>Rugby</li>
<li>Cycling</li>
<li>Gaming</li>
</ul>
</div>
<!--profile -->
<div class="box two">
<h2>
<U>Photo Of Me
</U>
</h2>
<p>Please don't be mean
</p>
<img src="ProfilePic.jpg" alt="Profile pic" width="300" height="300">
<p>I know what a beautiful man ;)
</p>
</div>
<div class="box three">
<!-- Jobs table -->
<h2>
<u>Table Of My Current/ Previous Jobs
</U>
</h2>
<table>
<tr>
<th>company
</th>
<th>Job Title
</th>
<th>length of time there
</th>
</tr>
<tr>
<td>Network Research
</td>
<td>Telemarketer
</td>
<td>2 Months
</td>
</tr>
<tr>
<td>David MacBeth Moir
</td>
<td>Kitchen Associate
</td>
<td>3 months
</td>
</tr>
<tr>
<td>Justice Mill
</td>
<td>Kitchen Associate
</td>
<td>1 year to present
</td>
</tr>
</table>
<!-- spoons para-->
<h3>
<U>Why I Stay at Spoons
</U>
</h3>
<p>Cause its good patter and the people there as a good laugh but he job its self is pretty rubbish
</p>
</div>
<div class="box four">
<h2>
<U>Questions?
</U>
</h2>
<p>Please feel free to ask any questions if you need help understanding anything for example:
</p>
<ul>
<li>Information given didnt make sense
</li>
<li>Further questions on the information on the page
</li>
<li>The layout was confusing
</li>
<li>ect...
</li>
</ul>
<form>
<fieldset>
<legend>Please leave a comment...
</legend>
<label for="name">Name:
</label>
<input type="text" name="name" value="" />
<label for="email">Email
</label>
<input type="text" name="email" value="" />
<label for="comments">Comments
</label>
<textarea name="comments" cols="45" rows="5">
</textarea>
<input type="submit" value="submit" />
</fieldset>
</form>
</div>
</div>
<div class="box5">
</div>
<div class="box6">
</div>
</body>
</html>
我试图在方框1和方框4中创建无序列表，但它们无法正确显示，主要CSS电子表格如下：
h1 {
color:black;
}
h2 {
text-align:center;
}
p {
margin-top:10px;
}
*{
margin:0;
padding:0;
}
body {
background-color: white;
}
form {
padding-top:120px;
}
img {
margin-left:10px;
margin-top:6px;
border: 3px solid grey;
}
h3 {
margin-left:30px;
margin-right:30px;
margin-top:10px;
}
h4 {
margin-right:30px;
margin-top:40px;
}
iframe {
margin-left:150px;
margin-top:40px;
}
#wrapper{
width:1000px;
height:1350px;
margin:auto;
background:#white;
}
#nav{
width:1000px;
height:50px;
background:grey;
}
.box{
width:400px;
height:400px;
float:left;
background:#ff0;
margin: 65px 0 0 65px ;
border:5px solid grey;
}
.box2 {
width: 400px;
height:900px;
float:left;
background:#ff0;
margin:65px 0 0 65px;
border:5px solid grey;
}
.box3 {
width:400px;
height:400px;
float:right;
background:#ff0;
margin-right:65px;
margin-top:65px;
border:5px solid grey;
}
.box4 {
width:865px;
height:400px;
background:#ff0;
margin-left:65px;
margin-top:540px;
border:5px solid grey;
}
.box5 {
width:auto;
height:150px;
background:white;
}
.box6 {
width:auto;
height:60px;
background:#3c3c3c;
}
.box7 {
width:auto;
height:1100px;
background:white;
}
.one p{
color:red;
}
.two p{
color:purple;
}
.three p{
color:green;
}
.four p{
color:red;
}
我无法理解为什么无序列表不起作用，我已经与几个以前编码过HTML的朋友一起检查过，他们无法向我提供任何帮助。我认为它可能是列表中的div，但是我看不到任何会弄乱实际列表的东西。任何帮助将不胜感激。
答案 0 :(得分：1)
您使用过：
li {
float: left;
}
如果您希望它们正常工作，基本上您不能浮动li个项目。通过类，id-s或html标记定位您想要li的{{1}}项目，但不能直接定位。