我正在尝试在div标头中向左浮动徽标,向右浮动一组链接

问题描述 投票:0回答:2

我正在尝试创建一个标头,该标头的左侧有一个徽标,而一组链接则在右侧水平并排排列。这是我的下面的代码,带有结果图像。我真的需要帮助吗

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>
hyperlink css-float
2个回答
0
投票

链接类应具有正确的文本对齐方式才能解决。

将该行添加到.links样式:

text-align: right;

如果您希望水平显示它们,建议您使用一些柔性显示器。


0
投票

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

.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;
}
© www.soinside.com 2019 - 2024. All rights reserved.