gpt4 book ai didi

html - 将 Logo 和链接放在标题中的同一行

转载 作者:行者123 更新时间:2023-11-28 07:47:59 25 4
gpt4 key购买 nike

我正在制作一个网站,在页眉中我需要一个 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>
&nbsp;|&nbsp;
<a href="About.html">About</a>
&nbsp;|&nbsp;
<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> &nbsp;|&nbsp; <a href="About.html">About</a> &nbsp;|&nbsp; <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/

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