gpt4 book ai didi

html - 即使我说它向左浮动,或向右浮动,它仍然在另一行

转载 作者:行者123 更新时间:2023-11-28 08:36:44 25 4
gpt4 key购买 nike

我为我的网站制作了一个菜单和导航,但出于某种原因,他一直将“致谢名单”页面放在第二行,而不是将其与我的主页链接放在同一行,因为我做了 float : rigth;float: left;

这是我的 html:

<!DOCTYPE html/>
<html>
<head>
<meta charset="utf-8"/>
<title>My Webpage</title>
<link rel="stylesheet" href="sheets/main.css"/>
</head>
<body>
<div class="titlebackground">
<h1 class="title"> My Webpage </h1>
</div>
<div class="menuitem home"><p><a href="index.html">Home</a></p></div>
<div class="menuitem contact"><p><a href="other_pages/contact.html">Contact</a></p></div>
<div class="article">Hello</div>
<div class="article">Hello2</div>
</body>
</html>

和 CSS:

body{
font-family: Arial;
}

.article {
float: left;
width: 200px;
margin-left: 10px;
margin-top: 10px;
padding: 5px;
border: 2px solid blue;
}

.title{
color:white;
background-color:black;
padding: 20px 20px 20px 20px;
margin: 10px 540px 10px 540px;
border: 8px outset red;
border-radius: 10px;
font-size: 30px;

}

.titlebackground{
margin: 0px 0px 0px 0px;
background-image:url(../images/titlebackground.jpg);
border: 8px groove red;
}

.menuitem{
float: rigth;
}

.contact{
margin: 10px 540px 10px 0px;
}

.home{
margin: 10px 540px 10px 540px;
}

a:link{
color:#FF0000;
background-color:white;
border: 5px solid red;
padding: 5px 5px 5px 5px;
}

a:hover{
color:#FF0000;
background-color:white;
border: 5px outset red;
background-image:url(../images/titlebackground.jpg)
}

a:active{
color:#FF0000;
}

a:visited{
color:#FF0000;
}

最佳答案

首先,rigth 应该是right:

.menuitem{
float: right;
}

其次,尝试将 .contact.home 的边距减小到 120px 以在同一行上看到它们:

.contact{
margin: 10px 120px 10px 0px;
}

.home{
margin: 10px 120px 10px 120px;
}

最后,将clear: right添加到您的.article:

.article {
clear: right;
float: left;
width: 200px;
margin-left: 10px;
margin-top: 10px;
padding: 5px;
border: 2px solid blue;
}

工作示例:http://codepen.io/anon/pen/PwmoeR

关于html - 即使我说它向左浮动,或向右浮动,它仍然在另一行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28003958/

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