Html 使用CSS创建响应性子导航项

我必须根据Photoshop中创建的模型设计创建导航。实体模型当前看起来如下所示：

---

我已经成功地创建了主导航点，现在我面临着子导航的一些问题。它应该是响应的，这意味着子导航中的最大项数应该是4，最小项数应该是2。使用CSS是否可以自动将单个元素放置在彼此相邻的位置

这是我已经拥有的：

<div id="topnavigation">
    <ul>
      <li><a href="#">PORTRAIT</a></li>
      <li id="restaurants"><a href="#" class="active">RESTAURANTS</a></li>
      <li id="restaurants_sub">
          <div class="wrapper_boxes"><div id="restaurants_sub_content" class="sub_boxes"><span>lövenstube</span><br>Master deanse bes-<br>poke brooklyn, wiliams-<br>burg minim id wayfa</div></div>
          <div class="wrapper_boxes"><div id="restaurants_sub_content" class="sub_boxes"><span>lövenstube</span><br>Master deanse bes-<br>poke brooklyn, wiliams-<br>burg minim id wayfa</div></div>      
          <div class="wrapper_boxes"><div id="restaurants_sub_content" class="sub_boxes"><span>lövenstube</span><br>Master deanse bes-<br>poke brooklyn, wiliams-<br>burg minim id wayfa</div></div>
          <div class="wrapper_boxes"><div id="restaurants_sub_content" class="sub_boxes"><span>lövenstube</span><br>Master deanse bes-<br>poke brooklyn, wiliams-<br>burg minim id wayfa</div></div>
          <div class="wrapper_boxes"><div id="restaurants_sub_content" class="sub_boxes"><span>lövenstube</span><br>Master deanse bes-<br>poke brooklyn, wiliams-<br>burg minim id wayfa</div></div>
          <div class="wrapper_boxes"><div id="restaurants_sub_content" class="sub_boxes"><span>lövenstube</span><br>Master deanse bes-<br>poke brooklyn, wiliams-<br>burg minim id wayfa</div></div>
          <div class="wrapper_boxes"><div id="restaurants_sub_content" class="sub_boxes"><span>lövenstube</span><br>Master deanse bes-<br>poke brooklyn, wiliams-<br>burg minim id wayfa</div></div>
          <div class="wrapper_boxes"><div id="restaurants_sub_content" class="sub_boxes"><span>lövenstube</span><br>Master deanse bes-<br>poke brooklyn, wiliams-<br>burg minim id wayfa</div></div>
      </li>
      <li><a href="#">HOTEL</a></li>
      <li><a href="#">FESTE</a></li>
      <li><a href="#">SEMINARE</a></li>
      <li><a href="#">VERANSTALTUNGEN</a></li>
    </ul>
</div>

lövenstube
迪恩斯·贝斯大师-
布鲁克林，威廉斯-
小堡
lövenstube
迪恩斯·贝斯大师-
布鲁克林，威廉斯-
小堡
lövenstube
迪恩斯·贝斯大师-
布鲁克林，威廉斯-
小堡
lövenstube
迪恩斯·贝斯大师-
布鲁克林，威廉斯-
小堡
lövenstube
迪恩斯·贝斯大师-
布鲁克林，威廉斯-
小堡
lövenstube
迪恩斯·贝斯大师-
布鲁克林，威廉斯-
小堡
lövenstube
迪恩斯·贝斯大师-
布鲁克林，威廉斯-
小堡
lövenstube
迪恩斯·贝斯大师-
布鲁克林，威廉斯-
小堡

---

谢谢你的提示！Thx.

浮动

.sub\u框

左移，并在

#restaurants\u sub

上设置一个最小宽度和最大宽度，该宽度只能容纳2-4个

.sub\u框

在CSS中类似这样的内容

#topnavigation li{
清除：左；
}
#餐饮部{
最大宽度：400px；
}
.分电箱{
宽度：100px；
浮动：左；
}

“使用CSS是否可以自动将单个元素放置在彼此相邻的位置？”您指的是哪些元素？Lövenstube、Bistro、Verdana等。这些都是单子导航元素。您可以发布一个JSFIDLE，其中包含一些CSS和您已经尝试过的内容吗？尝试添加类

。子框span{display:inline block；float:left；}

此外，如果删除

标记，因为它们是内联元素，它们应该自动相邻显示。