Problème d'alignement de la navigation ul

-1

Je n'arrive pas à aligner ma navigation dans le coin supérieur gauche de mon site. Je sais ce que le problème est, c'est que c'est dans un div avec affichage flex et justifier le centre du contenu. Mais je ne peux pas le déplacer hors de la div ou il sera au-dessus de la page entière. Je pense que cela doit être une solution simple, mais je ne peux pas penser tout de suite en ce moment. Alors, comment pourrais-je résoudre ce problème?Problème d'alignement de la navigation ul

J'ai essayé de créer un nouveau div à l'extérieur de l'en-tête et un autre à l'intérieur mais je ne peux pas le réparer. Il s'agit du site. Merci

Edit: oublié position: fixed lol

Source

2017-09-24 Kuebiko

<html><head> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> 
    <link href="https://fonts.googleapis.com/css?family=Crimson+Text:600" rel="stylesheet"> 

     <title>Pink</title> 
     <style> 
     * { 
      margin: 0; 
      padding: 0; 
      box-sizing: border-box; 
     } 
    @-ms-viewport { 
     width: device-width; 
    } 

    header { 
     background-color: #fdd1d2; 
     width: 100vw; 
     height: 100vh; 
     display: flex; 
     justify-content: center; 
     border: 4px red solid; 
    } 

    .nav { 
     padding: 1vw; 
     font-family: 'Crimson Text', serif; 
     border: 1px green solid; 
     height: 15vh; 

    } 

    .header { 
     line-height: 100vh; 


     background-image: url('header.jpg'); 
     background-size: cover; 
     border: 4px blue solid; 
     margin-top: 25vh; 
     height: 50vh; 
     width: 50vw; 
     font-family: 'Crimson Text', serif; 
     font-size: 1.5vw; 
     /*color: #fdd1d2;*/ 
    } 

    .text { 

     /*margin-top: -.75vh;*/ 
    } 



    ul { 
     list-style: none; 
    } 



    a { 
     font-size: 1.5vw; 
     color: black; 
     text-decoration: none; 
     transition: color .5s ease-out; 
    } 

    a:hover { 
     color: #ffcccd; 
    } 




    body { 
     overflow: hidden; 
    } 
    li { 
     list-style-type: none; 
    } 
    /* 6+Portrait */ 

    @media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait) { 
     .text { 
     font-size: 3vw; 
     } 

     @-ms-viewport { 
     width: device-width; 
     } 



     a { 
     font-size: 5vw; 
     color: black; 
     text-decoration: none; 
     transition: color .5s ease-out; 
     } 

     a:hover { 
     color: #ffcccd; 
     } 
    } 
    </style> 
</head> 

<body cz-shortcut-listen="true"> 

    <header style=" 
    justify-content: space-between; 
"> 

    <div class="nav" style=" 
    display: flex; 
    justify-content: normal; 
"> 
     <ul> 
     <li><a href="pink.html">Home</a></li> 
     <li><a href="">About</a></li> 
     <li><a href="">Portfolio</a></li> 
     <li><a href="">Contact</a></li> 
     </ul> 
    </div> 
    <div class="header" style=" 
    width: 100%; 
    display: flex; 
    margin: 100px 300px; 
"> 
     <div class="text" style=" 
    /* width: 100%; */ 
"> 
     <h1>1080 Benchmarks </h1> 
     </div> 
    </div> 
    </header> 



</body></html>

Source

2017-09-24 22:31:50 Sarahshuffle

Vous pouvez ajouter à la CSS pour .nav

position: absolute; 
left: 0;

qui le rend indépendant du reste - sur les petits écrans, il pourrait se chevaucher , mais pour les écrans de taille moyenne à grande, c'est la solution la plus simple. (BTW: position: fixed a le même effet dans cette situation particulière

Tout le reste implique de changer votre HTML

Source

2017-09-24 22:44:49 Johannes

Problème d'alignement de la navigation ul

Répondre

Questions connexes