Блог

Главная - Вопросы по программированию - Как спроектировать/сделать так, чтобы тег привязки выглядел точно так же, как кнопка (очень расплывчато, но подробно описано ниже)

Как спроектировать/сделать так, чтобы тег привязки выглядел точно так же, как кнопка (очень расплывчато, но подробно описано ниже)

#html #css

Вопрос:

Это обычный тег кнопки на краю, независимо от того, какой край css применяется к тегам кнопок по умолчанию, никаких изменений с моей стороны. https://prnt.sc/18mosg9

Это моя попытка создать что-то подобное: https://prnt.sc/18moxm4 или на самом деле просто якорь, который выглядит/напоминает кнопку.

Я думаю, что проблема довольно ясна, но, чтобы выразить это словами, как мне сделать так, чтобы тег привязки представлял собой полный прямоугольник, а не динамически настраиваемую «вещь» на основе текста внутри тега привязки? Как теги кнопки, так и теги привязки содержат один и тот же текст, который включает в себя <br> тег внутри него.

Я не совсем уверен в том, как это сделать, и у меня нет ни малейшего представления о том, как и возможно ли это вообще.

Текущий CSS для якоря-это

 .anchorBTN {
    padding: 5px 10px;
    background-color: white;
    text-decoration: none;
    color: black;
}

Комментарии:

1. Я предлагаю начать с изучения большего display количества свойств CSS. Вы также можете использовать инструменты разработчика браузера (Ctrl F12 или Cmd F12), чтобы проверить применяемые стили по умолчанию button и использовать их для создания собственных пользовательских стилей, отмечая, что стили могут варьироваться в зависимости от браузера.

2. @Spectric это, вероятно, просто плохая формулировка с моей стороны, но она в основном просто отсекает часть тега привязки, когда он достигает <br> тега, а затем переходит к следующей строке вниз.

Ответ №1:

отсекает часть тега привязки, когда он достигает <br> тега

Это можно исправить, применив display:block к якорю:

 .anchorBTN {
  padding: 5px 10px;
  background-color: white;
  text-decoration: none;
  background-color: #EFEFEF;
  color: black;
  display: block;
} 
 <b>With display:block:</b><br/>
<a class="anchorBTN">PLACEHOLDER PLACEHOLDER<br/>PLACEHOLDER PLACEHOLDER PLACEHOLDER PLACEHOLDER</a>

<hr>

<b>Without display:block</b><br/>
<a class="anchorBTN" style="display:unset">PLACEHOLDER PLACEHOLDER<br/>PLACEHOLDER PLACEHOLDER PLACEHOLDER PLACEHOLDER</a>

Комментарии:

1. nvm, это имеет большой смысл, когда я впервые попробовал блок отображения, я считаю, что установил на нем ширину и высоту, поэтому это выглядело очень странно, что привело меня к удалению блока отображения, не удалив сначала ширину и высоту, поэтому я никогда не пробовал это снова

Метки: , , ,