我正在尝试为我的某个项目制作浮动菜单，但我无法让它工作。
我的目标是能够在屏幕中间浮动一个水平菜单，下面有一个内容div。内容div（#preferencescontent）绝不应该比内容更广泛，但不能超过屏幕的90％。
现在问题。它似乎有时会起作用，而且原因不明。有些表将div缩小到菜单的大小，而其他表扩展了很多。我添加了一个示例，由于某种原因，它扩展了div方式比我预期的更多。
这是代码（下面的代码）：
<div class="lightbox" id="preferencesdiv">
<div id="preferencesholder">
<div class="sidemenu">
<div id="deviceoverviewbutton" class="menuitem">Device overview</div>
<div id="irulesbutton" class="menuitem">Defined iRules</div>
<div id="certificatebutton" class="menuitem">Certificates</div>
<div id="logsbutton" class="menuitem">Logs</div>
<div id="preferencesbutton" class="menuitem">Preferences</div>
<div id="helpbutton" class="menuitem">Help</div>
</div>
<div id="preferencescontent">
<div id="helpcontent">
<h2>Tips and tricks</h2>
<h3>Filtering for pool members being down</h3>
<p>This one is a bit of a hidden feature. In the Pool/Members column you can filter on "DOWN", "UP" and "DISABLED".</p>
<p>It's not perfect though since pools or members with any of these words in the name will also end up as results.</p>
</div>
</div>
</div>
https://codepen.io/anon/pen/vdOXWj
感谢任何帮助。谢谢！
答案 0 :(得分：1)
如果删除“float：left;”
你得到了想要的结果吗？我不确定我理解你在这里想要达到的目标。
答案 1 :(得分：1)
您可以尝试从元素中删除float。
此外，您正在为尚未明确position的元素添加定位坐标，因此您可以删除它们。
:root {
--alternatetablecolor: #f9f9f9;
--headerbackgroundcolor: #efefef;
--headerfontcolor: #333;
--bordercolor: #dddddd;
--defaultfontcolor: #222;
}
.lightbox {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
text-align: center;
}
div#preferencesholder {
background: #fff;
display: inline-block;
text-align: left;
max-height: 75%;
max-width: 90%;
overflow: hidden;
padding: 0px;
border: 1px #000 solid;
-webkit-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
margin-top: 100px;
}
div#preferencescontent {
overflow-y: scroll;
max-height: 80%;
margin: 10px;
width: 100%;
}
div.sidemenu {
background-color: var(--headerbackgroundcolor);
width: 100%;
text-align: center;
}
div.sidemenu div.menuitem {
padding: 10px;
font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
display: inline-block;
margin: 0px -2px 0px -2px;
}
div.sidemenu div.menuitem img {
max-height: 30px;
vertical-align: middle;
}
div.menuitem:hover {
background-color: #d0d0d0;
cursor: pointer;
}
div#helpcontent {
max-width: 550px;
margin: 0 auto;
}<div class="lightbox" id="preferencesdiv">
<div id="preferencesholder">
<div class="sidemenu">
<div id="deviceoverviewbutton" class="menuitem">Device overview</div>
<div id="irulesbutton" class="menuitem">Defined iRules</div>
<div id="certificatebutton" class="menuitem">Certificates</div>
<div id="logsbutton" class="menuitem">Logs</div>
<div id="preferencesbutton" class="menuitem">Preferences</div>
<div id="helpbutton" class="menuitem">Help</div>
</div>
<div id="preferencescontent">
<div id="helpcontent">
<div id="helpcontent">
<h2>Tips and tricks</h2>
<h3>Filtering for pool members being down</h3>
<p>This one is a bit of a hidden feature. In the Pool/Members column you can filter on "DOWN", "UP" and "DISABLED".</p>
<p>It's not perfect though since pools or members with any of these words in the name will also end up as results.</p>
</div>
</div>
</div>
</div>