我的導航不是我想要它的地方

如果你運行代碼，你會看到我有一個頭文本在左上角，但我希望我的導航是在右上角，但它只出現在標題底部。我試着檢查元素並試圖解決它，但沒有喜悅。這是我的代碼。我的導航不是我想要它的地方

html, body { 
 
     height: 100%; 
 
     width: 100%; 
 
     margin: auto; 
 
     padding: auto; 
 
    } 
 
    
 
    h1 { 
 
     margin: 0; 
 
     padding: 0; 
 
    } 
 
    
 
    ul { 
 
     margin: 0; 
 
     padding: 0; 
 
    } 
 
    
 
    .ct { 
 
     font-weight: lighter; 
 
    } 
 
    
 
    header { 
 
     position: fixed; 
 
     top: 0; 
 
     left: 0; 
 
     height: 75px; 
 
     width: 100%; 
 
     background: -webkit-linear-gradient(top, #3a537a 1%,#204377 100%); 
 
     -webkit-box-shadow: 0px 9px 35px -5px rgba(0,0,0,0.75); 
 
    } 
 
    
 
    header h1 { 
 
     font-size: 30px; 
 
     font-family: Roboto; 
 
     color: #ffffff; 
 
     line-height: 75px; 
 
     padding-left: 15px; 
 
     font-weight: 400; 
 
     letter-spacing: 0.05em; 
 
    } 
 
    
 
    header nav ul{ 
 
     float: right; 
 
    } 
 
    
 
    header nav ul li { 
 
     display: inline-block; 
 
    }

 <!DOCTYPE html> 
 
    <html lang="en"> 
 
    
 
    <head> 
 
     <meta charset="UTF-8"> 
 
     <title>CT Designs</title> 
 
     <!-- Stylesheets--> 
 
     <link rel="stylesheet" type="text/css" href="css/index.css"> 
 
     <!-- Fonts--> 
 
     <link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i" rel="stylesheet"> 
 
    </head> 
 
    
 
    <body> 
 
     <header> 
 
     <h1><span class="ct">CT</span> Designs</h1> 
 
     <nav> 
 
      <ul> 
 
      <li>Home</li> 
 
      <li>About Me</li> 
 
      <li>Projects</li> 
 
      <li>Contact</li> 
 
      </ul> 
 
     </nav> 
 
     </header> 
 
    </body> 
 
    
 
    </html>

來源

2017-03-10 Cían Mac Tiarnáin

您可以添加到float: left和header h1將允許浮動器右側的導航列表，您指定。

但我會使用帶有justify-content: space-between的標題上的flexbox將元素向左/向右推，然後使用align-items來垂直對齊標題內容。

html, 
 
body { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: auto; 
 
    padding: auto; 
 
} 
 

 
h1 { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
ul { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.ct { 
 
    font-weight: lighter; 
 
} 
 

 
header { 
 
    position: fixed; 
 
    top: 0; 
 
    right: 0; 
 
    height: 75px; 
 
    width: 100%; 
 
    background: -webkit-linear-gradient(top, #3a537a 1%, #204377 100%); 
 
    -webkit-box-shadow: 0px 9px 35px -5px rgba(0, 0, 0, 0.75); 
 
    display: flex; 
 
    justify-content: space-between; 
 
    align-items: center; 
 
} 
 

 
header h1 { 
 
    font-size: 30px; 
 
    font-family: Roboto; 
 
    color: #ffffff; 
 
    line-height: 75px; 
 
    padding-left: 15px; 
 
    font-weight: 400; 
 
    letter-spacing: 0.05em; 
 
} 
 

 
header nav ul { 
 
    float: right; 
 
} 
 

 
header nav ul li { 
 
    display: inline-block; 
 
}

<header> 
 
    <h1><span class="ct">CT</span> Designs</h1> 
 
    <nav> 
 
    <ul> 
 
     <li>Home</li> 
 
     <li>About Me</li> 
 
     <li>Projects</li> 
 
     <li>Contact</li> 
 
    </ul> 
 
    </nav> 
 
</header>

來源

2017-03-10 19:16:39

謝謝！幫助一噸 –

@CíanMacTiarnáin歡迎您:) –

其原因是由於在浮子。如果你使用絕對定位，它將工作 - 調整以適應。

html, body { 
 
     height: 100%; 
 
     width: 100%; 
 
     margin: auto; 
 
     padding: auto; 
 
    } 
 
    
 
    h1 { 
 
     margin: 0; 
 
     padding: 0; 
 
    } 
 
    
 
    ul { 
 
     margin: 0; 
 
     padding: 0; 
 
    } 
 
    
 
    .ct { 
 
     font-weight: lighter; 
 
    } 
 
    
 
    header { 
 
     position: fixed; 
 
     top: 0; 
 
     left: 0; 
 
     height: 75px; 
 
     width: 100%; 
 
     background: -webkit-linear-gradient(top, #3a537a 1%,#204377 100%); 
 
     -webkit-box-shadow: 0px 9px 35px -5px rgba(0,0,0,0.75); 
 
    } 
 
    
 
    header h1 { 
 
     font-size: 30px; 
 
     font-family: Roboto; 
 
     color: #ffffff; 
 
     line-height: 75px; 
 
     padding-left: 15px; 
 
     font-weight: 400; 
 
     letter-spacing: 0.05em; 
 
    } 
 
    
 
    header nav ul{ 
 
     position: absolute; 
 
     top: 0; 
 
     right: 0; 
 
     color: white; 
 
    } 
 
    
 
    header nav ul li { 
 
     display: inline-block; 
 
    }

<!DOCTYPE html> 
 
    <html lang="en"> 
 
    
 
    <head> 
 
     <meta charset="UTF-8"> 
 
     <title>CT Designs</title> 
 
     <!-- Stylesheets--> 
 
     <link rel="stylesheet" type="text/css" href="css/index.css"> 
 
     <!-- Fonts--> 
 
     <link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i" rel="stylesheet"> 
 
    </head> 
 
    
 
    <body> 
 
     <header> 
 
     <h1><span class="ct">CT</span> Designs</h1> 
 
     <nav> 
 
      <ul> 
 
      <li>Home</li> 
 
      <li>About Me</li> 
 
      <li>Projects</li> 
 
      <li>Contact</li> 
 
      </ul> 
 
     </nav> 
 
     </header> 
 
    </body> 
 
    
 
    </html>

來源

2017-03-10 19:20:06 junkfoodjunkie

我的導航不是我想要它的地方

回答

相關問題