横のナビゲーションバーを作成するときに間違っていることは何ですか？

java/springブートプロジェクトのhtml/cssで簡単なナビゲーションバーを作成しようとしています。以下に見られるように、私のhtml/cssのスキルは超限定的です。確かにこれは私がやっている愚かなものです。前もって感謝します。横のナビゲーションバーを作成するときに間違っていることは何ですか？

HTML：

<!DOCTYPE html> 
<html lang="en" xmlns:th="http://www.thymeleaf.org"> 
<head> 
    <title>Title</title> 
    <link href="styles.css" rel="stylesheet" type="text/css"/> 
</head> 
<body> 
<header> Welcome to Toner Stock </header> 
    <div id="mynav"> 
     <ul> 
      <li><a href="home-page.html">Home</a></li> 
      <li><a href="add-buyer.html">Add Buyer</a></li> 
      <li><a href="add-manager.html">Add Manager</a></li> 
      <li><a href="current-stock.html">Current Stock</a></li> 
      <li><a href="transactions.html">Transactions</a></li> 
     </ul> 
    </div> 
</body> 
</html>

CSS：

header{ 
font-family: Impact, Haettenschweiler; 
font-size: 45px; 
text-align: center; 
} 

#mynav { 
    float: left; 
    margin: 0; 
    padding: 0; 
    width: 60px; 
} 

#mynav ul{ 

    display: inline-block; 
    list-style-type: none; 
    height:auto; 
    text-align: center; 
} 

#mynav li{ 
    display:inline-block; 
}

出典

2017-05-13 Ron Pitt

削除 '幅：それはあなたが幅の –

'から60px'は、これは完全に働いた水平 – Rhea

はい60PXを達成したいことは何か＃1 mynav' – meteorzeroo

Aナビゲーションバー（メニュー）このようなものを使用できます。ナビゲーションバーのリストに行のすべてのアイテムを聞かせてtext-decoration: none;

：によって

削除リンク下線をwidthを削除します。#mynav

header { 
 
    font-family: Impact, Haettenschweiler; 
 
    font-size: 45px; 
 
    text-align: center; 
 
} 
 

 
#mynav { 
 
    float: left; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
#mynav ul { 
 
    display: inline-block; 
 
    list-style-type: none; 
 
    height: auto; 
 
    text-align: center; 
 
} 
 

 
#mynav li { 
 
    display: inline-block; 
 
    padding: 5px; 
 
} 
 

 
#mynav li a { 
 
    text-decoration: none; 
 
} 
 

 
#mynav li:hover { 
 
    background: lightgray; 
 
}

<!DOCTYPE html> 
 
<html lang="en" xmlns:th="http://www.thymeleaf.org"> 
 

 
<head> 
 
    <title>Title</title> 
 
    <link href="styles.css" rel="stylesheet" type="text/css" /> 
 
</head> 
 

 
<body> 
 
    <header> Welcome to Toner Stock </header> 
 
    <div id="mynav"> 
 
    <ul> 
 
     <li><a href="home-page.html">Home</a></li> 
 
     <li><a href="add-buyer.html">Add Buyer</a></li> 
 
     <li><a href="add-manager.html">Add Manager</a></li> 
 
     <li><a href="current-stock.html">Current Stock</a></li> 
 
     <li><a href="transactions.html">Transactions</a></li> 
 
    </ul> 
 
    </div> 
 
</body> 
 

 
</html>

出典

2017-05-13 17:10:02

をその溢れた内容をカバーすることはできません、ありがとうございました。 –

@RonPittは喜んでお手伝いします –

あなたはナビゲーションバーの幅が非常に小さく設定されています。

これを試してみてください。

#mynav { 
    float: left; 
    margin: 0; 
    padding: 0; 
}

出典

2017-05-13 17:09:00 harsh8398

横のナビゲーションバーを作成するときに間違っていることは何ですか？

答えて

関連する問題