Перекрытие ссылок на странице

139

16 сентября 2019, 17:30

Я создавал меню используя HTML и CSS. Но есть проблема. Когда я открываю эти файлы в браузере пункты меню перекрывают друг друга! вот код самих файлов:

.t1 { 
  padding: 20px; 
} 
 
.t2 { 
  border: 1px solid #000000; 
  padding-right: 50px; 
  padding-bottom: 4px; 
  padding-left: 50px; 
  padding-top: 4px; 
  margin: 6px; 
  background: #383838; 
  font-family: Calibri; 
  font-size: 20px; 
} 
 
.t3 { 
  border: 1px solid #000000; 
  padding-right: 50px; 
  padding-bottom: 4px; 
  padding-left: 50px; 
  padding-top: 4px; 
  margin: 6px; 
  background: #383838; 
  font-family: Calibri; 
  font-size: 20px; 
} 
 
.t4 { 
  border: 1px solid #000000; 
  padding-right: 50px; 
  padding-bottom: 4px; 
  padding-left: 50px; 
  padding-top: 4px; 
  margin: 6px; 
  background: #383838; 
  font-family: Calibri; 
  font-size: 20px; 
} 
 
.t5 { 
  border: 1px solid #000000; 
  padding-right: 50px; 
  padding-bottom: 4px; 
  padding-left: 50px; 
  padding-top: 4px; 
  margin: 6px; 
  background: #383838; 
  font-family: Calibri; 
  font-size: 20px; 
} 
 
.t6 { 
  border: 1px solid #000000; 
  padding-right: 50px; 
  padding-bottom: 4px; 
  padding-left: 50px; 
  padding-top: 4px; 
  margin: 6px; 
  background: #383838; 
  font-family: Calibri; 
  font-size: 20px; 
} 
 
.t7 { 
  border: 1px solid #000000; 
  padding-right: 50px; 
  padding-bottom: 4px; 
  padding-left: 50px; 
  padding-top: 4px; 
  margin: 6px; 
  background: #383838; 
  font-family: Calibri; 
  font-size: 20px; 
} 
 
.t8 { 
  border: 1px solid #000000; 
  padding-right: 50px; 
  padding-bottom: 4px; 
  padding-left: 50px; 
  padding-top: 4px; 
  margin: 6px; 
  background: #383838; 
  font-family: Calibri; 
  font-size: 20px; 
} 
 
.t9 { 
  border: 1px solid #000000; 
  padding-right: 50px; 
  padding-bottom: 4px; 
  padding-left: 50px; 
  padding-top: 4px; 
  margin: 6px; 
  background: #383838; 
  font-family: Calibri; 
  font-size: 20px; 
}

<div class="t1"> 
  <a class="t2">пункт</a><br/> 
  <a class="t3">пункт</a><br/> 
  <a class="t4">пункт</a><br/> 
  <a class="t5">пункт</a><br/> 
  <a class="t6">пункт</a><br/> 
  <a class="t7">пункт</a><br/> 
  <a class="t8">пункт</a><br/> 
  <a class="t9">пункт</a><br/> 
</div>

Можете запустить этот код в своём браузере и вы поймёте о чём я говорю.Как решить эту проблему?

Answer 1

А почему вы не используете таблицу или список для постоений меню?

ul li{ 
  list-style:none; 
  display:inline-block; 
  margin:10px; 
}

<ul> 
  <li><a href="">Menu1</a></li> 
  <li><a href="">Menu2</a></li> 
  <li><a href="">Menu3</a></li> 
  <li><a href="">Menu4</a></li> 
  <li><a href="">Menu5</a></li> 
  <li><a href="">Menu6</a></li> 
</ul>

Answer 2

Вы используете тег ссылки для меню это не запрещается

Что бы ссылка переносилась на новую строку не надо городить кучу принудительных переносов а достаточно указать display:block;

У вас есть ошибка в том что вы пропустили важный аттрибут href и ни чего у вас не перекрывается

a{ 
  display:block; 
} 
.t2,.t3,.t4,.t5,.t6,.t7,.t8,.t9 { 
  border: 1px solid #000000; 
  padding-right: 50px; 
  padding-bottom: 4px; 
  padding-left: 50px; 
  padding-top: 4px; 
  margin: 6px; 
  background: #383838; 
  font-family: Calibri; 
  font-size: 20px; 
}

<div class="t1"> 
  <a class="t2" href="#">пункт</a> 
  <a class="t3" href="#">пункт</a> 
  <a class="t4" href="#">пункт</a> 
  <a class="t5" href="#">пункт</a> 
  <a class="t6" href="#">пункт</a> 
  <a class="t7" href="#">пункт</a> 
  <a class="t8" href="#">пункт</a> 
  <a class="t9" href="#">пункт</a> 
</div>

Что бы список li не ставил маркеры применяют list-style:none; вот таким образом

li{ 
  list-style:none; 
} 
a{ 
  text-decoration:none; 
  font-size:20px; 
  border: 1px solid #000000; 
  padding:4px 50px; 
  margin: 6px; 
  background: #383838; 
  font-family: Calibri; 
  font-size: 20px; 
}

<ul> 
  <li><a href="">link4</a></li> 
  <li><a href="">link4</a></li> 
  <li><a href="">link4</a></li> 
  <li><a href="">link4</a></li> 
  <li><a href="">link4</a></li> 
  <li><a href="">link4</a></li> 
  <li><a href="">link4</a></li> 
  <li><a href="">link4</a></li> 
  <li><a href="">link4</a></li> 
</ul>