我在设计一个页面，遇到了一个问题，我自己解决不了。缩小时，标题中的元素垂直移动 25%，元素的位置完全错误。 我正在使用 block 显示，因为我希望菜单项在缩小时移动到中心(例如在 facebook、twitter 或这里)，所以内联和内联 block 不能解决我的问题。 相对定位的原因相同。
除了相对定位，还有其他方法可以达到同样的效果吗？
有什么正确的想法吗？
干杯
安德鲁
HTML:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css" media="screen"> </style>
<title>Layout</title>
<link href="../Content/LAYOUT.css" rel="stylesheet" />
</head>
<body>
<div id="menucontainer">
<div id="wrapper">
<a href="HTTP://www.google.com" class="LC">
<p class="L"> </p>
</a>
<a href="http://www.idk.com" class="KC">
<p class="K">Új Kérdés</p>
</a>
<a href="http://www.idk.com" class="EC">
<p class="E">Új Értékelés</p>
</a>
<a href="http://www.idk.com" class="MessageC">
<p class="Message"> </p>
</a>
</div>
</div>
</body>
</html>
CSS:
body { background-color: lightgray;
margin:0 auto;}
#menucontainer {
position: fixed;
width: 100%;
min-height: 45px;
height: 20px;
background: #3f3f3f; /* Old browsers */
background: -moz-linear-gradient(top, #3f3f3f 0%, #000000 91%, #3f3f3f 91%, #33eb31 93%, #33eb31 101%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3f3f3f), color-stop(91%,#000000), color-stop(91%,#3f3f3f), color-stop(93%,#33eb31), color-stop(101%,#33eb31)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #3f3f3f 0%,#000000 91%,#3f3f3f 91%,#33eb31 93%,#33eb31 101%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #3f3f3f 0%,#000000 91%,#3f3f3f 91%,#33eb31 93%,#33eb31 101%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #3f3f3f 0%,#000000 91%,#3f3f3f 91%,#33eb31 93%,#33eb31 101%); /* IE10+ */
background: linear-gradient(to bottom, #3f3f3f 0%,#000000 91%,#3f3f3f 91%,#33eb31 93%,#33eb31 101%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3f3f3f', endColorstr='#33eb31',GradientType=0 ); /* IE6-9 */
-webkit-box-shadow: 0px 2px 12px 4px rgba(50, 50, 50, 0.64);
-moz-box-shadow: 0px 2px 12px 4px rgba(50, 50, 50, 0.64);
box-shadow: 0px 2px 12px 4px rgba(50, 50, 50, 0.64);
font-family: Corbel;
z-index: 2;
display: inline-block; }
#wrapper {
margin-left: auto;
margin-right: auto;
width: 960px;
z-index: -1;
white-space: nowrap;
height: 30px;
max-height: 30px;
display: block;
padding-top:9px;
padding-bottom:10px; }
.LC {
left: 0%;
min-width: 30px;
top: -20px;
max-width:30px;
width:30px;
display: block;
position:relative;
white-space:nowrap;
height:30px;
min-height:30px;
margin-right:20px;
margin-top:2px; }
.L {
background-image: url(/logo.png);
background-size: 30px 30px;
height: 30px;
width: 30px;
min-width: 30px;
max-width: 30px; }
.KC {
left: 7%;
top: -64px;
display: inline-block;
position: relative;
text-decoration: none;
width:90px;
min-width:90px;
white-space:nowrap;
height:30px; }
.K {
font-family: Arial;
font-weight: bold;
font-size: 1.2em;
color: white;
text-decoration:none; }
.K:link {
text-decoration: none; }
.K:visited {
text-decoration: none; }
.K:hover {
text-decoration: none;
color: #33eb31; }
.K:active {
color: white;
text-decoration: none; }
.EC {
left: 20%;
top: -105px;
display: block;
position: relative;
text-decoration: none;
width:110px;
min-width:110px;
white-space:nowrap;
height:30px; }
.E {
position: relative;
font-family: Arial;
font-weight: bold;
font-size: 1.2em;
color: white;
min-width: 30px; }
.E:link {
text-decoration: none;
}
.E:visited {
text-decoration: none;
}
.E:hover {
text-decoration: none;
color: #33eb31;
}
.E:active {
color: white;
text-decoration: none;
}
最佳答案
我认为你可能把这个复杂化了一点。您不需要使用 position:absolute;。您应该为菜单使用 ul li 元素。您可以将 #wrapper 设置为您的页面大小，并使用 margin:0px auto 将其居中。
如果这看起来像您正在尝试做的事情，请告诉我:http://jsfiddle.net/gxwxk3zv/
关于html - 寻找一种将 block 元素排成一行的方法，但设计在 25% 缩放时分崩离析，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27019544/