Пустое поле между пунктами меню - PullRequest
Новая
       1

Пустое поле между пунктами меню

0 голосов
/ 09 мая 2018

Я пытаюсь сделать горизонтальное меню

но эти пустые блоки находятся между моими пунктами меню (приблизительно 50px x 50px)

Я использовал инструмент Chrome Inspect, и эти случайные пустые якоря там ни с чем и == $ 0 в конце 

.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 ]

0 голосов
/ 09 мая 2018

Это было последствием того, что я не закрыл тег привязки, как это должно было быть. Просто измените <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>
0 голосов
/ 09 мая 2018

Я думаю, что вы делаете ошибку при закрытии якорных тегов 

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

до 

<a href="./homepage.html">Home Page</a>
0 голосов
/ 09 мая 2018

Замените ваш 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>
0 голосов
/ 09 мая 2018

Это потому, что вы закрываете <a> следующим образом: <a/> вместо </a> здесь: 

<a href="./homepage.html">Home Page<a/>
<a href="./products.html">Products<a/>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...