无序列表不会在图片下方移动

问题描述

我想在我的家庭链接图像下面有一个无序列表，用于网站导航。由于某些原因，我不知道该如何做！

.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;
  
}