Question

我正在设计一个页面，遇到问题，我无法自己解决。在缩小时，标题中的项目垂直移动，为25％，元素处于完全错误的位置。我正在使用块显示，因为我希望菜单项在缩小时移动到中心（比如在facebook，twitter或这里），所以内联和内联块无法解决我的问题。相对定位的原因相同。

是否有另一种方法可以获得相同的效果而不是相对定位？

任何想法如何使它正确？

干杯

安德鲁

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;
}

Answer 1

我认为你可能会让这一点变得复杂。你不应该使用position:absolute;。您应该使用ul li元素作为菜单。您可以将#wrapper设置为页面大小，并使用margin:0px auto将其居中。

请告诉我这是否与您尝试做的事情相符：http://jsfiddle.net/gxwxk3zv/

寻找一种方法来将块元素放置在一条线上，但设计在25％变焦时会分开

1 个答案: