0
我相信我有一個非常獨特的問題。我正在嘗試創建一個菜單,基本上我有一些浮動的div div在主菜單中,在網頁頂部持有div。問題是我需要讓父元素具有自動高度,因爲我希望它是動態的,以防萬一我更改菜單按鈕(子DIV)上的填充。此外,父級寬度爲100%,其內部的子級具有自動寬度並設置了最大寬度,這樣我就可以在頁面調整大小時將左右子菜單按鈕放在一起小。但是,一切正常,直到您將頁面調整到左右右側菜單部分合併爲止,然後所有子菜單按鈕都需要堆疊,而不是自動爲主頁面創建垂直滾動條。CSS浮動DIV元素
我不知道這是否會造成問題,因爲我打算稍後使用媒體查詢來自動切換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;
}
希望的CSS貼OK。我是Stack新手。
再次感謝!
你是什麼意思的「堆棧,而不是自動創建一個垂直滾動條」。你能更清楚地知道你想要完成什麼樣的行爲嗎? – teh1
我也有點困惑。我想評論一下,你也不應該多使用一次ID。但更重要的是,對於這種情況,如果您沒有如此深入的嵌套元素,我認爲這會有很大的幫助。完全沒有理由讓左導航元素嵌套四層深。 – thesublimeobject
沒有什麼特別的問題。阿門! –