0

我目前正在创建一个网站，但遇到了一件奇怪的事情：我有一个 950 宽并以页面为中心的内容 div。在里面我有一个标题 div、一个菜单 div 和一些其他内容 div。我希望菜单 div 和其他内容 div 彼此相邻，所以我考虑在两个 div 上使用 float:left。但是，当我在菜单 div 上使用这个 float:left 时，它会被推到右边，我不知道为什么。我认为其他一些因素正在将其推向右侧。

顺便说一句，我正在使用自定义 Drupal 主题，Zen 的子主题来创建页面。

这是我用来创建页面的 HTML（没有标题）：

<div id="root">
<div class="content">
    <div class="left-menu">
        <ul>
            <li><p>Camera</p></li>
            <li><p>Audio</p></li>
            <li><p>Licht</p></li>
            <li><p>Lenzen</p></li>
            <li><p>Grip</p></li>
            <li><p>Accessoires</p></li>
            <li><p>Recorders</p></li>
            <li><p>Transport</p></li>
            <li><p>Edit suits</p></li>
            <li><p>Crew</p></li>
        </ul>
    </div>

    <div class="products-overview">
    This is some other content that I want to the right of the menu.
    </div>

</div>

以下是我在左侧菜单和产品概览中设置的一些 CSS 属性：

.left-menu {
margin-top: 10px;
background-color: #BBB;
width: 150px;
float: left;
}

.products-overview {
background-color: #BBB;
float: left;
}

谁能解释一下为什么左侧菜单被推到右侧？

4

3 回答 3

2

嗯，我相信这是您使用的 normalize.css 样式表的结果。

问题实际上源于.header元素，其中有一个表。规范化样式表已margin-bottom:1.5em应用于表格，它转换为.header元素上的边距（因为它没有填充/边框），这反过来将 发送.left-menu到右侧（因为边距导致没有空间适合它在左边）。

添加到您当前的.header table定义可以解决这个问题，只需简单的：

.header table{
    margin-bottom: 0;
}

我希望这就是你要找的！如果没有，请告诉我，我很乐意提供进一步的帮助。祝你好运！

于 2013-07-18T20:27:01.837 回答
0

我试图复制你的问题。我做了并找到了一个可行的解决方案。只需将 products-overview 类设置为float:none. 看到这个小提琴。http://jsfiddle.net/shaansingh/yj4Uc/

于 2013-07-18T20:23:10.943 回答
0

在 Mozilla Firefox 中，我觉得还可以。从您的代码中，我只能看到您需要内容 div 的宽度。并注意尺寸，尤其是左/右填充和边框。

于 2013-07-18T20:34:58.443 回答