使用CSS创建响应式子导航项目

我必须创建基于在Photoshop中创建的样机设计的导航。该样机目前看起来是这样的：使用CSS创建响应式子导航项目

enter image description here

我已经成功地创建主通航点，现在我面临的一些问题与子导航。它应该是响应式的，这意味着子导航中项目的最大数目应该是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>

所有提示都感激！谢谢。

来源

2013-07-25 doonot

“是否有可能用CSS来定位一个元素彼此相邻自动？”你指的是哪些元素？ – user1477388

Lövenstube，Bistro，Verdana等。这些是sigle子导航元素。 – doonot

你可以用你已经试过的CSS发布一个JSFiddle吗？ – Wex

浮动.sub_boxes左边，并设置#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-25 17:14:54 hungerstar

使用CSS创建响应式子导航项目

回答

相关问题