0

我必须根据在 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>

感谢所有提示！谢谢。

4

1 回答 1

0

向左浮动.sub_boxes并设置一个 min-width 和 max-width ，#restaurants_sub它只会容纳 2-4 .sub_boxes。

http://jsfiddle.net/xBPjP/

你的 CSS 中有这样的东西

#topnavigation li {
     clear: left;
}
#restaurants_sub {
     max-width: 400px;
}
.sub_boxes {
     width: 100px;
     float: left;
}
于 2013-07-25T17:14:54.843 回答