0

我有这个布局，顶部有一个导航，然后是一个图像。英雄图像的上边距为负，以便导航工作中的透明度。

+----------------------------------------+
| a.logo Home Cat1 Cat2 Cat3 Cat4 Cat5   |
+----------------------------------------+
|                                        |
| Huge hero image here                   |
|                                        |
+----------------------------------------+

a.logo是网站的品牌，里面有一张图片。从hometo 的项目cat5（实际上那里有更多类别，但你明白了）在<ul>with inline-blocked<li>中。问题是，当屏幕调整大小时，被剪裁的<li>项目只会付诸东流（如图 2 所示）。我希望它只是被剪裁，如图 3 所示。

图二：

+----------------------------------+
| a.logo Home Cat1 Cat2 Cat3 Cat4  |
|                  Cat5            |
+----------------------------------+
|                                  |
| Huge hero image here             |
|                                  |
+----------------------------------+

图 3：

+----------------------------------+
| a.logo Home Cat1 Cat2 Cat3 Cat4  |
+----------------------------------+
|                                  |
| Huge hero image here             |
|                                  |
+----------------------------------+

这是一个半实际的代码（实际内容被保留）：

<div id="nameplate" class="container">
    <div class="row">
        <div id="nav" class="twelvecol last">
            <a href="" class="logo"><img src="logo.png" alt="The Logo"></a></a>
            <ul id="nav_ul">
                <li><a href="">Cat 1</a></li>
                <li><a href="">Cat 2</a></li>
                <li><a href="">Cat 3</a></li>
                <li><a href="">Cat 4</a></li>
                <li>
                    <a href="">Cat 5</a>
                    <ul class="social-dropdown">
                        <li><a href="">Facebook</a></li>
                        <li><a href="">Twitter</a></li>
                        <li><a href="">YouTube</a></li>
                        <li><a href="">RSS Feed</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</div>

CSS样式的东西：

.container#nameplate { margin: 0 auto; padding: 20px 0; position: relative; text-align: center; z-index: 3; }
.container#nameplate #nav .logo, .container#nameplate #nav > ul { display: inline; vertical-align: middle; }
.container#nameplate #nav .logo { display: inline-block; }
.container#nameplate #nav > ul { height: 32px; overflow: hidden; }
.container#nameplate #nav li { font: 300 1.25em 'Oswald', Helvetica, Arial, sans-serif; display: inline-block; line-height: 2.1em; list-style: none; margin-right: 5px; text-transform: uppercase; vertical-align: middle }
.container#nameplate #nav li a { color: #ccc; padding: 3px; }
.container#nameplate #nav li a:hover { color: #fbfbfb; text-decoration: none; }
.container#nameplate #nav ul.social-dropdown { position: absolute; }
.container#nameplate #nav ul.social-dropdown li { display: block; font-size: 80%; text-align: left; }

我已经尝试过overflow: hidden了，加上一个固定的高度 on div#nameplate，但它会切断预计将显示在最后<li>一项上的下拉菜单。

关于如何在不切断下拉菜单的情况下执行此响应式操作的任何想法？

4

1 回答 1

0

Edit2：这是关于 jsfiddle 的以下想法的示例。

编辑：为您定义一个宽度.logo，并设置#nav为（即导航列表position: relative的父级）。div设置position: absolute在您的#nav ul, 并将其放置left: XXpx; right: 0;在“XX”等于您的徽标宽度以及您希望在它和导航之间放置的任何额外空间的位置。

display: block在 ul 上将允许它隐藏溢出。这将对您的布局产生连锁反应，但您只需要定义一个宽度来控制它。

于 2013-03-13T16:23:45.350 回答