gpt4 book ai didi

html - HTML 和 CSS 新手,为类创建网页。无法让我的 ul 正确 float

转载 作者:太空宇宙 更新时间:2023-11-04 16:30:14 24 4
gpt4 key购买 nike

我是网页设计的新手,我需要为类(class)创建一个简单的网站。出于某种原因,无论我尝试什么,我的无序列表都不会正确 float 。请帮忙!由于某种原因,我的无序列表只会留在页面的左侧。

这是我的html

<!DOCTYPE html>

<html>

<head>
<meta charset="UTF-8"> <title> PhiladelphiaEagles.com - Summary Page </title> <link href="style.css" rel="stylesheet">
</head>

<body>

<a href="summary.html"> Go To Home Page </a>
<h1 align="center"> Jacob Kaneff</h1>
<h2> Website Evaluation: <a href="philadelphiaeagles.com" target="_blank"> - Summary Page </a> <h2>

<figure>
<img src="eagles.png" alt="Homepage screen shot" width="650" height="650">
<figcaption align="center">Homepage Screen Shot</figcaption>
</figure>

<div id="wrapper">



The official Philadelphia Eagle's website is your one stop for all things Philadelphia Eagles. Whether you want the Latest updates or want to participate in online discussions, this page is for you. Sponsered by the NFL, this page is beautifully laid out and is easily navigated. The news is always well written, and up to date with breaking news coming in daily.


</div>





<ul>

<li> <a href="summary.html"> Summary </a> </li>
<li> <a href="audience.html"> Audience </a> </li>
<li> <a href="task.html"> Task </a> </li>
<li> <a href="navigation.html"> Navigation </a> </li>
<li> <a href="functionality.html"> Functionality </a> </li>
</ul>




<footer>


</footer>


</body>


</html>

这是我的CSS

body{
background-color:gray;
color:#000000;
width:910px;
font-family:Georgia,Arial,Serif;
font-size: 12px;
}



figure {

float:right;
}

#wrapper{float:left; width: 150px; border: 1px solid brown; }

ul {
float:right;
border: 1px solid blue ;
float: right;
}

li:link {color:green;}李:访问{颜色:绿色;}李:悬停{颜色:红色;}li:active {color:yellow;}

最佳答案

好吧,有几件事你可能想改变 :D

  1. 正文{
    背景色:灰色;
    颜色:#000000;
    宽度:910px;
    字体系列:Georgia、Arial、Serif;
    字体大小:12px;
    }

注意你有

width:910px;

这会将整个网页更改为仅占用浏览器窗口的 910 像素。您没有将 body 与窗口的其余部分对齐,所以整个东西都留在左边。

要解决此问题,您可以做几件事,一个解决方案是将 width:910px; 更改为 width:100%;

另一个解决方案是将您的 body 居中,您可以通过将以下两行添加到 body{} css block

margin-left:auto;
margin-right:auto;

您的页面中还有其他一些事情需要深入研究,例如将已弃用的 align="center"与您的 CSS 一起使用,但一次一个步骤。你做得很好,继续加油!

关于html - HTML 和 CSS 新手,为类创建网页。无法让我的 ul 正确 float ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22420136/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com