当我希望它们留在原地时，我正在构建的网页元素会四处移动。如果以“This is a Beta version”开头的行改变长度，则 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 block :
<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>
最佳答案
#mainmenu 和#bottom-line 都相对于#lowerleft 的左侧定位。如果您想让它们相对于右侧 定位，则需要将所有子项都 float 到右侧。您还需要使用 clear: both，这样 children 就不会坐在一起。
#lowerleft * {
float: right;
clear: both;
}
在你的网站上使用上面的内容可以让我调整 #bottom-line 的宽度而不影响 #mainmenu 的位置，所以这应该对你有用:)
请注意，这会将菜单稍微向右移动。如果你想把主菜单移回原来的位置，你可以增加它的 margin-right 值。它对以前的菜单没有影响，尽管添加 float: right 也修复了这个问题;)
关于html - 我的 CSS 定位不稳定。我怎样才能稳定它？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39629475/