Question

尝试在html / css中为java / spring启动项目创建一个简单的导航栏。正如您在下面看到的，我的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;
}

Answer 1

您正在将导航栏的宽度设置得如此之小。

试试这个：

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

Answer 2

导航栏（菜单）可以使用以下内容：

删除链接下划线：text-decoration: none;

让导航栏列出一行中的所有项目，从width

中删除#mynav

＆＃13;

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

＆＃13;

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

＆＃13;

在构建水平导航栏时我做错了什么？

2 个答案: