我试图在 div header 中向左浮动徽标并向右浮动一组链接

Question

我正在尝试创建一个 header，其中左侧有一个徽标，右侧有一组水平并排的链接。这是我下面的代码，带有结果图像。我真的需要帮助

thats the result

#header{
    height: 100px;
    width:100%;
    overflow:hidden;
    background-color:#1b2142;
    padding:0px;
    top:0px;
    left:0px;
     
}
.links{
    width:70%;
    float:right;   
    padding-top:10px;
    overflow: hidden;
}
.link ul li{
    display:inline-block;
    text-align:center;
    font-size:20px;
    list-style: none;
    color:white;

<body>
        <div id="header">
            <div class="logo"><img src="untitled.jpg" height="100px" width="100px" >
                <div class="links">
                    <ul>
                        <a class="link" href="#">Home</li></a>
               <li><a class="link" href="#">About Us</li></a>
               <li><a class="link" href="#">Contact Us</li></a>
               <li><a class="link" href="#">FAQ</li></a>
               <li><a class="link" href="#">View Users</li></a>
               <li><a class="link" href="#">Our Staffs</li></a>
               <li><a class="link" href="#">See testimonies</li></a>
               <li><a class="link" href="#">Address</li></a>
                        <li><a class="link" href="#">Alumis</li></a>
                    </ul>
                </div>
            
            </div>

Answer 1

链接 class 应该有正确的文本对齐方式才能解决这个问题。

将该行添加到 .links 样式中：

text-align: right;

如果你想让它们水平显示，我建议你使用一些柔性显示器。

Answer 2

编辑这部分代码如下。应该可以。

.links{
    float:right;
    padding-top:10px;
    overflow: hidden;
}
.link ul li{
    display:inline-block;
    text-align:center;
    font-size:20px;
    list-style: none;
    color:white;
}
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

li {
    float: left;
}

我试图在 div header 中向左浮动徽标并向右浮动一组链接

I'm trying to float a logo left and a group of links right in a div header

hyperlink

css-float