我正在尝试创建一个标头,该标头的左侧有一个徽标,而一组链接则在右侧水平并排排列。这是我的下面的代码,带有结果图像。我真的需要帮助吗
#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>
链接类应具有正确的文本对齐方式才能解决。
将该行添加到.links
样式:
text-align: right;
如果您希望水平显示它们,建议您使用一些柔性显示器。
如下编辑这部分代码。应该可以。
.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;
}