Html 正在寻找一种将块元素放置在一条直线上的方法，但设计在25%的缩放率下会崩溃_Html_Css_Responsive Design

Html 正在寻找一种将块元素放置在一条直线上的方法，但设计在25%的缩放率下会崩溃

html css responsive-design

Html 正在寻找一种将块元素放置在一条直线上的方法，但设计在25%的缩放率下会崩溃,html,css,responsive-design,Html,Css,Responsive Design,我正在设计一个页面，遇到了一个问题，我自己解决不了。缩小时，标题中的项目垂直移动，比例为25%，元素位置完全错误。我使用块显示，因为我希望菜单项移动到zoomout的中心（比如facebook、twitter或此处），所以内联和内联块不能解决我的问题。相对定位也是如此有没有其他方法来达到相同的效果，而不是相对定位有没有什么好办法干杯安德鲁 HTML: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"

我正在设计一个页面，遇到了一个问题，我自己解决不了。缩小时，标题中的项目垂直移动，比例为25%，元素位置完全错误。我使用块显示，因为我希望菜单项移动到zoomout的中心（比如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>

我想你可能把事情复杂化了一点。您不需要使用

position:absolute。您应该在菜单中使用ul li
元素。您可以将#wrapper
设置为页面大小，并使用边距：0px auto
将其居中
如果这看起来像您正在尝试的操作，请告诉我：
您正在尝试将菜单元素居中吗？这可以通过display:block；保证金：自动菜单容器上的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;
}