如何將標題和導航欄放在同一行（不工作）

基本上發生了什麼是我的h1和我的導航元素不在同一行。我嘗試添加100％的寬度並在h1和nav上浮動左側和右側屬性，但仍然不在同一行上。我在h1中放了一些亂碼，告訴你練級很少。幫幫我！如何將標題和導航欄放在同一行（不工作）

這裏是我的HTML：

<!doctype html> 
    <html> 
    <head> 
      <title> 
      Personality Speakes Before You 
      </title> 
      <meta charset='utf-8'> 
     <link href="main.css" rel="stylesheet" type="text/css"> 
    </head> 
    <body> 
     <header> 
     <h1>Anum kdljflkasjfdlajsdlfjslfjsalkdfjld;skjgl;j</h1> 
     <nav> 
      <ul> 
       <li><a href="#">Home</a></li> 
       <li><a href="#">About</a></li> 
       <li><a href="#">Blog</a></li> 
       <li><a href="#">Event</a></li> 
       <li><a href="#">Gallery</a></li> 
       <li><a href="#">Contact</a></li> 
      </ul> 
     </nav> 
     </header> 
    </body> 
</html>

這裏是我的CSS：

body { 
    background-color: azure; 
    font-family: cursive; 
} 
    header { 
    width: 100%; 
} 
h1 { 
    float:left; 
    font-size: 30px; 
    text-decoration: underline; 
} 
nav { 
    float: right; 
} 
ul { 
     color: darkslategray; 
    } 

li { 
    display: inline; 
    font-size: 30px; 
    margin-left: 10px; 
    margin-right: 10px; 
}

謝謝！

來源

2017-01-22 Ushi

試着改變你的浮display: inline-block，並設置頭white-space: nowrap：

body { 
 
    background-color: azure; 
 
    font-family: cursive; 
 
} 
 
header { 
 
    display: flex; 
 
    justify-content: space-between; 
 
    align-items: center; 
 
    width: 100%; 
 
    white-space: nowrap; 
 
} 
 
h1 { 
 
    display: inline-block; 
 
    font-size: 30px; 
 
    text-decoration: underline; 
 
} 
 
nav { 
 
    display: inline-block; 
 
} 
 
ul { 
 
    color: darkslategray; 
 
} 
 

 
li { 
 
    display: inline; 
 
    font-size: 30px; 
 
    margin-left: 10px; 
 
    margin-right: 10px; 
 
}

<header> 
 
    <h1>Anum</h1> 
 
    <nav> 
 
    <ul> 
 
     <li><a href="#">Home</a></li> 
 
     <li><a href="#">About</a></li> 
 
     <li><a href="#">Blog</a></li> 
 
     <li><a href="#">Event</a></li> 
 
     <li><a href="#">Gallery</a></li> 
 
     <li><a href="#">Contact</a></li> 
 
    </ul> 
 
    </nav> 
 
</header>

注：由於字體大小都這麼大了，看到全效「整頁」模式

來源

2017-01-22 01:23:47 TheYaXxE

謝謝！這有幫助，但如果我有一個更小的h1，只有「Anum」，但我仍然想在右側浮動我的鏈接/導航？這將如何工作？ – Ushi

沒有工作:(不知道該怎麼辦....想知道其他web開發人員能夠做到這一點 – Ushi

上面的代碼在代碼片段中工作正常; h1在左側，nav在右側。在你的網站上使用一些其他的代碼？ – TheYaXxE

h1和nav太寬，不適合一行，所以它取決於你想要發生什麼，然後如何解決它。一個簡單的解決方法是使用媒體查詢來調整這些元素開始重疊時的字體大小。

body { 
 
    background-color: azure; 
 
    font-family: cursive; 
 
} 
 
    header { 
 
    width: 100%; 
 
} 
 
h1 { 
 
    float:left; 
 
    font-size: 30px; 
 
    text-decoration: underline; 
 
} 
 
nav { 
 
    float: right; 
 
} 
 
ul { 
 
     color: darkslategray; 
 
    } 
 

 
li { 
 
    display: inline; 
 
    font-size: 30px; 
 
    margin-left: 10px; 
 
    margin-right: 10px; 
 
} 
 

 
@media (max-width: 1280px) { 
 
    h1,li { 
 
    font-size: 20px; 
 
    } 
 
} 
 

 
@media (max-width: 900px) { 
 
    h1,li { 
 
    font-size: 16px; 
 
    } 
 
} 
 

 
@media (max-width: 800px) { 
 
    h1,li { 
 
    font-size: 12px; 
 
    } 
 
}

<!doctype html> 
 
<html> 
 

 
<head> 
 
    <title> 
 
    Personality Speakes Before You 
 
    </title> 
 
    <meta charset='utf-8'> 
 
    <link href="main.css" rel="stylesheet" type="text/css"> 
 
</head> 
 

 
<body> 
 
    <header> 
 
    <h1>Anum kdljflkasjfdlajsdlfjslfjsalkdfjld;skjgl;j</h1> 
 
    <nav> 
 
     <ul> 
 
     <li><a href="#">Home</a></li> 
 
     <li><a href="#">About</a></li> 
 
     <li><a href="#">Blog</a></li> 
 
     <li><a href="#">Event</a></li> 
 
     <li><a href="#">Gallery</a></li> 
 
     <li><a href="#">Contact</a></li> 
 
     </ul> 
 
    </nav> 
 
    </header> 
 
</body> 
 

 
</html>

或者，您可以使用響應字號單位，比如vw基於頁面寬度的規模。

* {margin:0;padding:0;} 
 

 
body { 
 
    background-color: azure; 
 
    font-family: cursive; 
 
} 
 
    header { 
 
    width: 100%; 
 
} 
 
h1 { 
 
    float:left; 
 
    font-size: 1.5vw; 
 
    text-decoration: underline; 
 
} 
 
nav { 
 
    float: right; 
 
} 
 
ul { 
 
     color: darkslategray; 
 
    } 
 

 
li { 
 
    display: inline; 
 
    font-size: 1.5vw; 
 
    margin-left: 10px; 
 
    margin-right: 10px; 
 
}

<!doctype html> 
 
<html> 
 

 
<head> 
 
    <title> 
 
    Personality Speakes Before You 
 
    </title> 
 
    <meta charset='utf-8'> 
 
    <link href="main.css" rel="stylesheet" type="text/css"> 
 
</head> 
 

 
<body> 
 
    <header> 
 
    <h1>Anum kdljflkasjfdlajsdlfjslfjsalkdfjld;skjgl;j</h1> 
 
    <nav> 
 
     <ul> 
 
     <li><a href="#">Home</a></li> 
 
     <li><a href="#">About</a></li> 
 
     <li><a href="#">Blog</a></li> 
 
     <li><a href="#">Event</a></li> 
 
     <li><a href="#">Gallery</a></li> 
 
     <li><a href="#">Contact</a></li> 
 
     </ul> 
 
    </nav> 
 
    </header> 
 
</body> 
 

 
</html>

或者你也可以使用其他技術，如隱藏在vavigation的隱藏菜單，當你規模瀏覽器了，他們不再適合在一行上。然後你使用鏈接/按鈕來顯示隱藏的菜單。

來源

2017-01-22 01:28:05

我對你的vm和查詢的概念並不是很熟悉，而且我的h1應該只是「Anum」，但是我放了額外的東西來展示不平坦的東西。「Anum」？那麼我如何將h1和nav保持在同一行？ – Ushi

如何將標題和導航欄放在同一行（不工作）

回答

相關問題