Question

我正在做一个下拉菜单，我希望所有下拉项都在一行中，可能会下降到屏幕分辨率的下一行。我的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>

CSS

.main {float:left; display:inline-block; width:auto}

.sub-menu{float:left; width:300px;}

.content{width:100%}

我定位的是当有人点击主菜单＆＃34; 菜单＆＃34;它下拉到子菜单＆＃34; 子菜单 ＆＃34;并且所有子菜单都排成一行，直到屏幕宽度发生变化，最后一个自动进入下一行。任何帮助将非常感谢人们!!!

提前致谢。

米歇尔

Answer 1

您的问题有点难以理解，但从我猜测的是，您想要点击主菜单，子菜单会下拉，显示内容（img with text）。

这可能就是你要找的东西：

<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>

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

<p>元素会自动在网页显示中删除一行，使其显示在img标记下方。

将多个链接放在包装器

1 个答案: