如何解决无序列表不会在图片下方移动
我想在我的家庭链接图像下面有一个无序列表,用于网站导航。由于某些原因,我不知道该如何做!
.logo {
width: 50vmin;
}
.logo-container {
float: left;
margin-left: 2.5vmin;
display: inline-block;
}
.navbar {
display: inline-block;
list-style-type: none;
line-height: 27px;
float: left;
}
.navbar-item {
color: #e1e1e1;
text-decoration: none;
font-weight: bolder;
}
<a href="home" class="logo-container">
<img src="https://upload.wikimedia.org/wikipedia/commons/3/3a/logotest123.jpg" alt="logo" class="logo">
</a>
<br>
<ul class="navbar">
<li><a href="#" class="navbar-item">item</a></li>
<li><a href="#" class="navbar-item">item</a></li>
<li><a href="#" class="navbar-item">item</a></li>
<li><a href="#" class="navbar-item">item</a></li>
</ul>
当我尝试运行此代码时,ul显示在图像的右侧,而不是在我想要的位置下方。有解决方案吗?
解决方法
删除float
或使用clear: both
。
没有float
-
.logo {
width: 50vmin;
}
.logo-container {
margin-left: 2.5vmin;
display: inline-block;
}
.navbar {
display: inline-block;
list-style-type: none;
line-height: 27px;
}
.navbar-item {
color: #e1e1e1;
text-decoration: none;
font-weight: bolder;
}
<a href="home" class="logo-container">
<img src="https://upload.wikimedia.org/wikipedia/commons/3/3a/Logotest123.jpg" alt="Logo" class="logo">
</a>
<br>
<ul class="navbar">
<li><a href="#" class="navbar-item">item</a></li>
<li><a href="#" class="navbar-item">item</a></li>
<li><a href="#" class="navbar-item">item</a></li>
<li><a href="#" class="navbar-item">item</a></li>
</ul>
使用float
和clear
-
.logo {
width: 50vmin;
}
.logo-container {
float: left;
margin-left: 2.5vmin;
display: inline-block;
}
.navbar {
display: inline-block;
list-style-type: none;
line-height: 27px;
float: left;
clear: both;
}
.navbar-item {
color: #e1e1e1;
text-decoration: none;
font-weight: bolder;
}
<a href="home" class="logo-container">
<img src="https://upload.wikimedia.org/wikipedia/commons/3/3a/Logotest123.jpg" alt="Logo" class="logo">
</a>
<br>
<ul class="navbar">
<li><a href="#" class="navbar-item">item</a></li>
<li><a href="#" class="navbar-item">item</a></li>
<li><a href="#" class="navbar-item">item</a></li>
<li><a href="#" class="navbar-item">item</a></li>
</ul>
除非有特殊需要,否则建议您不要使用float
。
请勿在.logo-container和.navbar中使用float属性。 使用CSS代码如下:
.logo {
width: 50vmin;
}
.logo-container {
margin-left: 2.5vmin;
display: inline-block;
}
.navbar {
display: inline-block;
list-style-type: none;
line-height: 27px;
}
.navbar-item {
color: #e1e1e1;
text-decoration: none;
font-weight: bolder;
}
,
将图片更改为绝对位置,然后在顶部添加边距将其向下移动一点:
这是一支数字笔https://codepen.io/mikejact/pen/xxOWmGY
更改后的代码:
.logo-container {
float: left;
margin-left: 2.5vmin;
display: inline-block;
position: absolute;
}
.navbar {
display: inline-block;
list-style-type: none;
line-height: 27px;
margin-top: 50px;
float: left;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。