Question

我相信我有一个非常独特的问题。我正在尝试创建一个菜单，基本上我在主菜单中有一些浮动的子div在网页顶部持有div。问题是我需要让父元素具有自动高度，因为我希望它是动态的，以防我更改菜单按钮（子DIV）上的填充。此外，父级的宽度为100％，其中的子级具有自动宽度，并设置了最大宽度，这样当页面大小时，我基本上可以将其中的左右子菜单按钮组合在一起小。但是一直运行良好，直到您将页面调整到左右右侧菜单部分组合在一起的位置，然后所有子菜单按钮都要堆叠而不是自动为主页面创建垂直滚动条。

我不知道这是否会造成问题，因为我计划稍后使用媒体查询来自动切换CSS以获得移动兼容性。但是，我想找到解决这个问题的方法。如果我需要发布所有代码以获得正确的答案，请告诉我，我会这样做。

非常感谢你。

哦，顺便说一下，我已经搜索了大约一个小时的解决方案，但没有任何工作。我也可以发布下面的代码，因为我真的想找到解决方案。

HTML：

<body>
<div id="header" class="clearfix">
    <div id="wrapper">
        <div id="main-nav" class="float-left">
            <ul id="main-nav-menu" class="menu">
                <li id="main-menu-button">
                    <a href="#" data-description="Since 1976">
                        Pardee Electric
                    </a>
                </li>
            </ul>
        </div>
        <div id="main-nav" class="float-right">
            <ul ud="main-nav-menu" class="menu">
                <li id="main-menu-button" class="float-right">
                    <a href="#">
                        Get in Touch
                    </a>
                </li>
                <li id="main-menu-button" class="float-right">
                    <a href="#">
                        Residential
                    </a>
                </li>
                <li id="main-menu-button" class="float-right">
                    <a href="#">
                        Commercial
                    </a>
                </li>
                <li id="main-menu-button" class="float-right">
                    <a href="#">
                        Industrial
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>
</body>

CSS：

/* body data */

body {
margin-top: 0px;
-webkit-font-smoothing: subpixel-antialiased;
background-color: #F0F0F0;
}

ul {
list-style: disc;
}

/* header data */

#header {
width: 100%;
height: auto;
background-color: #456DC0;
border-bottom: 1px solid #FFFFFF;
}

#wrapper {
width: auto;
max-width: 1024px;
height: auto;
background: none;
margin: 0 auto;
}

.clearfix:after { 
content: " ";
display: block; 
height: 0; 
clear: both;
margin-top: 0;
}

#main-nav-menu {

}

#main-nav {
width: auto;
height: auto;
position: relative;
}

#main-nav ul, #main-nav .menu {
margin: 0px;
}

#main-nav li {
width: auto;
list-style: none;
margin: 0px;
position: relative;
display: inline;
}

#main-nav a {
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 16px;
padding: 15px 20px 15px 20px;
position: relative;
letter-spacing: 0px;
text-align: center;
text-decoration: none;
text-transform: none;
text-shadow: 1px 1px 1px rgba(0, 0, 0, .4);
display: block;
color: #F0F0F0;
z-index: 98;
-webkit-transition: background-color .2s ease, border .2s ease, color .4s ease,          opacity .2s ease-in-out;
background-color: #4186D2;
}

#main-nav a:active {
background-color: #000000;
}

#main-nav a:hover {
background-color: #333333;
color: #FFFFFF;
}

.float-right {
float: right;
}

.float-left {
float: left;
}

Demo in Jsfiddle

希望css发布好了。我是Stack的新手。

再次感谢！

Answer 1

您需要将class="clearfix"提交给id="wrapper"。

带浮动DIV元素的CSS

1 个答案: