Question

当我希望它们留在原地时，我建筑物的网页元素会移动。如果行开头＆＃34;这是Beta版本＆＃34;更改长度，4个菜单项（半透明灰色矩形）移位：如果我缩短底线，菜单项移动到右边;如果我把它拉长，菜单项就会向左移动。

如何排列东西，使一个元素的宽度不会改变与其垂直堆叠的其他元素的水平位置？

您可以在http://apdamien.info/nfair/GH/demo/mainmenu.html

查看该页面

以下是我认为代码的相关部分： CSS：

#mainmenu {
    width: 350px;
    padding-bottom: 14px;
    margin-right: 60px;
}

#maindiv {
    background: url(imgs/smalltown.jpg) no-repeat;
}

.menu-entry {
    display: block;
    cursor: default;
    color: #fff;
    width: 100%;
    height: 39px;
    padding-top: 13px;
    font-size: 20px;
    font-weight: bold;
    font-family: Univers,sans-serif;
    text-transform: uppercase;
    margin-bottom: 19px;
    margin-left: 8em;
    border: 2px solid black;
    text-align: center;
    background: rgba(96,96,96,0.65);
    text-decoration: none;
    text-transform: uppercase;
}
.menu-entry:hover {
    background: rgba(0,0,0,0.5);
}

HTML的相关部分：

<body>
<div id="maindiv">
<div id="titleauth">
  <div id="title"><img alt="Demo Game" src="imgs/title.svg"/></div>
  <div id="author"><a href="http://www.apdamien.info"
        target="_blank"><img alt="A. P. Damien" src="imgs/author.svg"/></a>
  </div>
    </div>
    <div id="lowerleft">
      <div id="mainmenu">
        <a class="menu-entry" href="game.html">New Game</a>
        <a class="menu-entry" href="helpmain.html">How to Play</a>
        <a class="menu-entry" href="restore.html">Restore Saved Game</a>
        <a class="menu-entry" href="credits.html">Credits</a>
      </div>
      <div id="bottom-line">
        <img alt="Beta version warning" src="imgs/beta.svg" />
      </div>
    </div>
</div>

</body>

Answer 1

#mainmenu和#bottom-line都相对于#lowerleft的左侧定位。如果您希望将它们相对于右侧 - 侧放置，则需要将所有子项浮动到右侧。您还需要使用clear: both，以便孩子们不会坐在一起。

#lowerleft * {
    float: right;
    clear: both;
}

在您的实际网站上使用上述内容，我可以调整#bottom-line的宽度，而不会影响#mainmenu的位置，因此希望这对您有用：）

请注意，这会将菜单稍微向右移动。如果要将主菜单移回其原始位置，可以增加其margin-right值。它之前对菜单没有影响，但float: right的添加也修复了这个问题;）

我的CSS定位不稳定。我该如何稳定它？

1 个答案: