我正在制作一个网站，在页眉中我需要一个 Logo 和一组水平链接。 Logo 必须在左侧，链接必须在右侧。我遇到的问题是，如果我向列表添加太多链接，它会换行到下一行，但我需要它紧贴页面右侧。横幅和链接列表都在标题中。我的 CSS 如下。
header{
width:100%;
height:10%;
background-color:#AC222A;
color:white;
}
links{
position: relative;
height: 10;
width: 10%;
float: right;
top: 35%;
display: inline;
}
banner{
position: absolute;
padding: 1%
left: 1%;
height; 10;
width: 15%
float: left;
}
HTML 如下:
<html>
<head>
<link rel="stylesheet" href="index.css">
</head>
<div id="header">
<div id = "banner">
<img src="pictures/logo_logo.png">
</div>
<div id = "links">
<a href="">home</a>
|
<a href="About.html">About</a>
|
<a href="Contact.html">Contact Us</a>
</div>
</div>
<body>
</body>
</html>
最佳答案
CSS 中的 ID 名称缺少 #。事实上，整个布局可以用一个简单的 float 来完成，所以在 HTML 中将链接移动到横幅之前。
#header {
background-color:#AC222A;
color:white;
}
#links {
float:right;
}<div id="header">
<div id="links">
<a href="">home</a> | <a href="About.html">About</a> | <a href="Contact.html">Contact Us</a>
</div>
<div id="banner">
<img src="pictures/logo_logo.png"/>
</div>
</div>编辑:(将评论转移到这里)- 要根据您现有的代码解决问题，您必须在此处设置 #links{width:10%;} , 只需删除它即可。
关于html - 将 Logo 和链接放在标题中的同一行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30600293/