Question

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

＆＃13;

#header {
    background-color:#AC222A;
    color:white;
}
#links {
    float:right;
}

＆＃13;

<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>

＆＃13;

修改（将评论转移到此处） - 要根据您现有的代码解决问题，您可以设置#links{width:10%;}，只需将其删除即可。

Answer 2

取出Width属性后，链接菜单显示格式正确，没有任何问题。

在标题中的同一行上创建徽标和链接

2 个答案: