Question

I made my website as responsive as possible(don't wanna know something about bootstrap). The only thing that doesn't stay in its place (which needs to stay in the middle). Here is my code:

    #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>

I made a jsfiddle but i can't see that it goes to much to the left like i saw on a tablet.

It is a tablet of work and it has long height. On my website it's better noticable My website If i change the height inside the desktop version. Then you see that the menu goes left and the first menu word disappears.

Is there a way to fix this?

Answer 1

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

我试着稍微清理你的css代码，删除不必要的东西。我认为现在按预期工作，如果没有，请指定更多一点，我将编辑代码以帮助您了解如何做您需要的。

 func main() {
        var wg sync.WaitGroup
        wg.Add(1)
        a := person{age: 3}
        fmt.Println(a.age)
        go func() {
            defer wg.Done()
            a.Lock()
            time.Sleep(5 * time.Second)
            a.age = 4
            fmt.Println(a.age)
            a.Unlock()
        }()
        wg.Wait()
        fmt.Println(a.age)
    }

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

How to let little menu with 3 links act responsive inside header?

1 个答案: