无序列表不会在我的图像下方移动

Question

我想在我的主页链接图像下方有一个无序列表，用于网站导航。出于某种原因，我不知道该怎么做！

.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 显示在图像的右侧，而不是我想要的位置下方。有什么解决办法吗？

Answer 1

删除 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 除非有特定需要使用它。

Answer 2

将您的图像更改为绝对位置，然后添加 margin-top 将其向下移动一点：

这里是码笔，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;
  
}

Answer 3

不要在 .logo-container 和 .navbar 中使用浮动属性。使用 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;
}

无序列表不会在我的图像下方移动

Unordered list won't move beneath my image

html

css

html-lists