html - 如何让带有 3 个链接的小菜单在标题内响应？

Question

我让我的网站尽可能响应(不想了解 Bootstrap )。唯一没有留在原处的东西(需要留在中间)。这是我的代码:

    #header {
    	position:fixed;
    	display:block;
    	width:100%;
    	top:0;
    	left:0;
    	padding-left:0vmax;
    	padding-right:5vmax;
    	z-index:99999;
    	height:8vmax;
    	max-height:8vmax;
    	 transition: .3s linear;
    	box-sizing:border-box;
    	  background-color: rgba(243,243,243,1.00);
    	
    			}
    
    #menuwrapper {
    	display:block;
    	float:right;
    	width:55vmax;
    	margin-top:0.35vmax;
    	margin-right:17vmax;
    	height:8vmax;
    	max-height:8vmax;
    	overflow:hidden;
    	box-sizing:border-box;
    	position:relative;	
    }
    
   

     #menu {position:absolute;height:100%;width:100%;display:table;padding: 2.5vmax; word-wrap:break-word;}
        #menu ul {word-spacing:2vmax;font-size:1.35vmax;padding:0;padding-bottom:0vmax;margin: 0 1vmax;}
        #menu li {display:inline-block;padding: 0vmax;}
        .rechts {display: table-cell;width: 1px;vertical-align: middle;white-space: nowrap;}
        #menu ul li a {height:8vmax;text-decoration:none;color:grey;transition: color .45s ease-in-out;margin-right:7.5vmax;}
        #menu ul li a:hover {color:#3f92c3;}

 <div id="header">
    <div id="menuwrapper">
    
    <div id="menu">
      <ul class="pad">
        </ul>
    <ul class="rechts">
    
    <li><a class="a1" id="page1" href="javascript:;">Services</a></li>
    <li><a class="a1" id="page2" href="javascript:;">Portfolio</a></li>
    <li><a class="a1" id="page3" href="javascript:;">Contact</a></li>
    </ul>
    </div>
    </div>
    </div>

我做了一个jsfiddle但我看不到它像我在平板电脑上看到的那样向左移动了很多。

这是一 block 工作板，高度很长。在我的网站上它更引人注目 My website如果我更改桌面版本中的高度。然后您会看到菜单向左移动，第一个菜单词消失。

有办法解决这个问题吗？

Answer 1

您无缘无故地覆盖了默认属性。

我尝试稍微清理一下您的 CSS 代码，删除不必要的内容。我认为现在可以按照您的预期工作，如果没有，请指定更多，我将编辑代码以帮助您了解如何执行您需要的操作。

#header {
    	position:fixed;
    	display:block;
    	width:100%;
    	top:0;
    	left:0;
    	padding-left:0vmax;
    	padding-right:5vmax;
    	z-index:99999;
    	height:8vmax;
    	max-height:8vmax;
    	transition: .3s linear;
    	box-sizing:border-box;
    	background-color: rgba(243,243,243,1.00);
    	
    			}
    
    #menuwrapper {
    	display:block;
    	float:right;
    	margin-top:0.35vmax;
    	margin-right:17vmax;
    	height:8vmax;
    	max-height:8vmax;
    	overflow:hidden;
    	box-sizing:border-box;
    	position:relative;	
    }
    
   

     #menu {padding: 2.5vmax; word-wrap:break-word;}
     
        #menu ul {word-spacing:2vmax;font-size:1.35vmax;padding:0;padding-bottom:0vmax;margin: 0 1vmax;}
        
        #menu li {display:inline-block;padding: 0vmax;}
        
        .rechts {vertical-align: middle; white-space: nowrap;}
        
        #menu ul li a {height:8vmax;text-decoration:none;color:grey;transition: color .45s ease-in-out;margin-right:7.5vmax;}
        #menu ul li a:hover {color:#3f92c3;}

<div id="header">
    <div id="menuwrapper">
    
    <div id="menu">
      <ul class="pad">
        </ul>
    <ul class="rechts">
    
    <li><a class="a1" id="page1" href="javascript:;">Services</a></li>
    <li><a class="a1" id="page2" href="javascript:;">Portfolio</a></li>
    <li><a class="a1" id="page3" href="javascript:;">Contact</a></li>
    </ul>
    </div>
    </div>
    </div>