在 header 中将徽标和链接放在同一行

Question

我正在制作一个网站，在 header 我需要一个徽标和一组水平链接。徽标必须在左侧，链接必须在右侧。我运行遇到的问题是，如果我向列表添加太多链接，它将换行到下一行，但我需要它紧贴页面右侧。横幅和链接列表都在 header 中。我的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>

Answer 1

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%;}，只需将其删除即可。

Answer 2

去掉 Width 属性后，link 菜单显示的格式很好，没有问题。

在 header 中将徽标和链接放在同一行

Make the logo and links on the same line in header

html

css

alignment