Question

我正在尝试制作横向菜单

但这些空块位于我的菜单项（aprox 50px x 50px）

之间

我使用了chrome检查工具，这些随机的空白锚点里面没有任何内容，最后是== $ 0

＆＃13;

.navbar{
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: red;
}

.navbar a{
    float: left;
    display: block;
    text-align: center;
    padding: 30px 25px;
    border: none;
    margin: none;
    text-decoration: none;
    font-size: 20px;    
}

.navbar a:hover {
    background: #54d5f2;
    color: black;

}

＆＃13;

<html>
	<head>
		<title>I Want Flowers</title>
		<link rel="stylesheet" type="text/css" href="style.css">
	</head>
	<body>
		<div class="navbar">
			<a href="./homepage.html">Home Page<a/>
			<a href="./products.html">Products<a/>
			<a href="./storelocations.html">Store Locations</a>
			<a href="./contactus.html">Contact Us</a>
		</div>
	</body>
</html>

＆＃13;

Answer 1

这是因为您关闭<a>这样的结果：<a/>而不是</a>：

<a href="./homepage.html">Home Page<a/>
<a href="./products.html">Products<a/>

Answer 2

我认为你在关闭锚标签时犯了错误

<a href="./homepage.html">Home Page<a/>

到

<a href="./homepage.html">Home Page</a>

Answer 3

用这个HTML替换HTML

<div class="navbar">
  <a href="./homepage.html">Home Page</a>
  <a href="./products.html">Products</a>
  <a href="./storelocations.html">Store Locations</a>
  <a href="./contactus.html">Contact Us</a>
</div>

Answer 4

这是不应该关闭锚标签的后续效果。只需将<a/>更改为</a>，您就可以了......：）

.navbar{
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: red;
}

.navbar a{
    float: left;
    display: block;
    text-align: center;
    padding: 30px 25px;
    border: none;
    margin: none;
    text-decoration: none;
    font-size: 20px;    
}

.navbar a:hover {
    background: #54d5f2;
    color: black;

}

<html>
	<head>
		<title>I Want Flowers</title>
		<link rel="stylesheet" type="text/css" href="style.css">
	</head>
	<body>
		<div class="navbar">
			<a href="./homepage.html">Home Page</a>
			<a href="./products.html">Products</a>
			<a href="./storelocations.html">Store Locations</a>
			<a href="./contactus.html">Contact Us</a>
		</div>
	</body>
</html>

菜单项之间的空白框

4 个答案: