2

首先请允许我提一下，我知道如何在正常情况下调整高度。尽管如此，我现在遇到了一些棘手的问题，并且我没有在其他帖子中找到解决方案。

我有一个名为“header”的div，占据了页面的整个宽度。
在那个 div 里面有一个名为“wrapper”的 div。它使用边距居中。
在该包装内，左侧有一个徽标浮动，右侧有一个菜单浮动。
前两个 div（标题和包装）假设根据内容（徽标和菜单）自动调整它们的高度。为此，我在浮动 div 之后添加了一个“更清晰”的 div。它工作正常，除非我在菜单的 li 元素上添加一些填充。在这种情况下，div 不会调整。请参阅下面小提琴中的蓝色 li。希望清楚，希望有人可以提供帮助。谢谢你。

小提琴：http : //jsfiddle.net/Gynft/

HTML：

  <div id="header">
        <div id="wrapper">
            <div id="logo">
                [ logo ]
            </div>
            <ul id="menu">
                <li><a href="" class="">AGENDA</a></li>
                <li><a href="" class="">MESSAGERIE</a></li>
                <li><a href="" class="">COMMUNAUTEE</a></li>
                <li><a href="" class="">DECONNEXION</a></li>
            </ul>
            <div class="clearer"></div>
        </div>    
    </div>​

CSS：

body {
font-family:arial;
font-size:10px;
}

.clearer {
clear:both;
}

#header{
background:yellow;

}

#wrapper {
background:green;
width:560px;
margin:20px auto;
}

#logo {
background:purple;
float:left;
}

#menu {
background:orange;
float:right;
}

#menu li {
display:inline;
padding:5px 10px;
background:blue;
}
4

4 回答 4

2

我不能确定为什么这可以解决您的问题，但是将蓝色 li 更改display为inline-block而不仅仅是 inline 似乎可行！

于 2012-11-29T09:46:34.103 回答
0

嘿，马克很简单，您可以通过以下方式获得所需的结果：overflow:hidden;

它是因为你没有清除你的parent div并且你已经使用floating了你的child div所以我有cleared你parent div的overflow:hidden;，现在它可以根据你的要求正常工作。

我希望你看起来像这样......

CSS

#header, #wrapper {
overflow:hidden;
}

#header{
background:yellow;
}

#wrapper {
background:green;
width:560px;
margin:20px auto;
}

演示

于 2012-11-29T09:46:31.553 回答
0

试试这个：

#wrapper {
     background: none repeat scroll 0 0 green;
     margin: 20px auto; overflow: hidden;
     width: 560px;
}
于 2012-11-29T09:49:46.137 回答
0 
<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
        <style>
            body{
                background:#ededed;
                margin:0 auto;
            }
            .main{
                width:720px;
                border:1px solid red;
                padding:5px;
            }
            .menu-item {
            padding:0;
            margin:0;
            width: 100%;
            border-bottom: 0;
            }
            .menu-item li{
                display: table-cell;
                width: 1%;
                float: none;
                border:1px solid green;
                margin:2px;
                padding:10px;
                text-align:center;
            }
        </style>
    </head>
    <body>
       <div class="main">
                <ul class="menu-item">
                    <li><a href="#">menu item 1</a></li>
                    <li><a href="#">menu item 2</a></li>
                    <li><a href="#">menu item 3</a></li>
                    <li><a href="#">menu item 4</a></li>
                    <li><a href="#">menu item 5</a></li>
                </ul>
       </div>
    </body>
</html>
于 2017-04-10T04:25:57.030 回答