Блог

При создании некоторых кнопок я столкнулся с этой проблемой, когда пустые пробелы / поля рядом с кнопками становятся интерактивными, от чего я сейчас и пытаюсь избавиться. Я просматривал похожие сообщения, в которых рассматриваются подобные вещи, но мне не повезло применить эти ответы к моему коду, и, к сожалению, моя возня с этим тоже не очень помогла. На данный момент эта штука сводит меня с ума, и я был бы признателен за любую помощь: ‘)

Вот сам код:

 button {
  background-color: #edca6e;
  border: none;
  color: #523e5c;
  padding: 8px 60px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 30px;
  font-family: 'Lucida Console';
  margin: 30px;
  cursor: pointer;
} 

 <center>
  <img src="https://picsum.photos/300/300" alt="logo" style="width:300px;height:300px;">
  <!--portfolio, about, contact, misc.-->
  <br><br><br>
  <a href="../1portfolio/portfolio.html"><button>text</button></a>
  <a href="/2aboutme/about.html"><button>text</button></a>
  <a href="#"><button style="margin:30px;">text</button></a>
  <a href="../4misc/misc.html"><button>text</button></a>
</center> 

Если что-то еще нужно уточнить, пожалуйста, дайте мне знать 🙂

Когда вы обернете свою кнопку <a> тегом, весь компонент кнопки будет доступен для кликабельности (включая поля). Хотя это практически невозможно использовать <a> <button> , у меня все же есть решение, с помощью которого вы можете преодолеть свою текущую проблему.

Чтобы сделать поле недоступным для кликабельности, вы можете применить поле в <a> теге и переместить атрибут отображения из <button> стиля в <a> стиль, пожалуйста, обратитесь к следующему коду:

CSS:

   button {
     background-color: #edca6e;
     border: none;
     color: #523e5c;
     padding: 8px 60px;
     text-align: center;
     text-decoration: none;
     font-size: 30px;
     font-family: 'Lucida Console';
     cursor: pointer;
  }
  a{
     display: inline-block;
     margin: 30px;
  }
 

HTML:

     <center>
      <img src="https://picsum.photos/300/300" alt="logo" style="width:300px;height:300px;">
      <!--portfolio, about, contact, misc.-->
      <br><br><br>
      <a  href="../1portfolio/portfolio.html"><button>text</button></a>
      <a  href="/2aboutme/about.html"><button>text</button></a>
      <a  href="#"><button >text</button></a>
      <a  href="../4misc/misc.html"><button>text</button></a>
    </center>
 

Поле должно быть перемещено в a вместо button . На данный момент button имеет некоторый запас, что делает a его избыточным.

И да, вы не должны использовать button inside a . Оба кликабельны.