代码之家 › 专栏 › 技术社区 › PatrikJ

宽度灵活的灯箱

center menu css

PatrikJ · 技术社区 · 6 年前

我试图为我的一个项目制作一个浮动菜单,但我就是无法让它工作。

我的目标是能够在屏幕中间浮动一个水平菜单,下面有一个内容div。content 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

感谢您的帮助。非常感谢。

2 回复 | 直到 6 年前

sol 6 年前

您可以尝试删除 float 来自您的元素。

此外,您正在将定位坐标添加到未指定显式 position ,以便您可以删除它们。

codepen

: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>

Tobias 6 年前

如果删除“float:left;”

从“div.sidemenu”

你得到你想要的结果了吗?我不确定我是否理解你在这里想要实现的目标。