Html 在包装中包含的行中放置多个链接

我正在做一个下拉菜单，我希望所有的下拉项目都在一行，并可能下降到屏幕分辨率的下一行。我的html是

HTML

  <li class="main"><a href="#"> Menu </a>
    <ul>
     <li class="sub-menu"><a href="#">
        <div class="content" style="width:300px;">
          <img src="image.jpg"><p>text</p>  
        </div></a>
      </li>

    <li class="sub-menu"><a href="#">
        <div class="content">
          <img src="image.jpg"><p>text</p>  
        </div></a>
      </li>    

   </ul>
 </li>

我的目标是，当有人单击主菜单“菜单””时，它会下拉到子菜单“子菜单”，所有子菜单排成一行，直到屏幕宽度改变，最后一个自动转到下一行。任何帮助都会受到人们的感激

提前谢谢

---

Michelle你的问题有点难理解，但据我猜测，你想单击主菜单，然后下拉一个子菜单，显示内容（带文本的img）

这可能是您正在寻找的：

<style>
 .main {background-color: red;}

 .sub-menu {background-color: blue;}
 .sub-menu a {display: inline-block; color: white;}
</style>

<div class="main">
 <a href="#"> Menu </a>
</div>

<div class="sub-menu">
  <a href="#"> <img src="image.jpg"> text </a>

  <a href="#"> <img src="image.jpg"> text </a>
</div>

.main{背景色：红色；}
.子菜单{背景色：蓝色；}
.子菜单a{显示：内联块；颜色：白色；}

在单击主菜单之前，可以隐藏子菜单。您可能还希望在链接中添加一些填充，以增加间距。颜色在那里，所以你可以看到布局

---

元素会自动在web显示中放置一行，使其显示在

img

标记下方。

您的子菜单中包含由文本和图像组成的内容。我想这些应该显示在“菜单链”下面？那么只有菜单中的“文本”以内联方式显示？您可能会发现创建“纯”二级菜单更容易，它只包含您希望显示的面包屑

文本。删除该段落tags@Obsidian：谢谢，伙计，但这就是原因，我希望子菜单中也包含内容，它就像一个下拉框，左边是图像，右边是一些文本。好的是它们都有相同的项目，有点重复，但在标签和图像库中有不同的名称，我仍然有点困惑，不知道你想要它如何显示。您是否正在寻找类似的东西，其中有多个子项缩进，具有不同的项目符号样式？或者，您是在寻找标准的项目符号，项目符号旁边有一个小图像，图像旁边有文本，全部以内联方式显示？也许是类似的东西，它将链接“向下”扩展，并完全改变移动设备的显示？

<style>
 .main {background-color: red;}

 .sub-menu {background-color: blue;}
 .sub-menu a {display: inline-block; color: white;}
</style>

<div class="main">
 <a href="#"> Menu </a>
</div>

<div class="sub-menu">
  <a href="#"> <img src="image.jpg"> text </a>

  <a href="#"> <img src="image.jpg"> text </a>
</div>