Мобильная версияЯ пробовал использовать встроенный блок, но это не сработало.
Я пробовал изменить высоту и ширину вручную, но динамически это не работало.
Размер коробки уже установлен bordor-box. Я увидел, что он установлен, когда просматривал страницу.
Я не знаю, что еще попробовать.
Вот код этого элемента. Есть еще родительские элементы, но я не думаю, что они влияют на этот элемент. Если вам нужно отобразить больше кода, дайте мне знать.
Код: Выделить всё
[img]https://i. sstatic.net/wizXST0Y.png[/img]
Любая помощь будет оценена по достоинству. Спасибо заранее за любую помощь.
Редактировать:
Первый пример кода: я попытался добавить свой код с необходимыми cdns для каждой из библиотек: Tailwind, React, Vite.Js и Daisy-UI. Это первый фрагмент кода. Мне жаль. Мне не удалось отформатировать код так же, как на картинке. Я оставил его там в качестве ссылки, поскольку это код веб-сайта.
Второй пример кода: я переделал код с использованием чистого HTML и CSS, используя стили при проверке страницы. Некоторые функции отсутствуют, но это показывает проблему с тонкой черной линией в качестве границы кнопки. На изображении показан меньший зазор между SVG и границей кнопки. Еще раз прошу прощения, так как я не знаю, что еще можно сделать, чтобы лучше продемонстрировать проблему.
Код: Выделить всё
.notes-list {
display: grid;
gap: 1rem;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.notes {
background-color: #fef68a;
border-radius: 10px;
padding: 1rem;
min-height: 170px;
display: flex;
flex-direction: column;
justify-content: space-between;
white-space: pre-wrap;
}Код: Выделить всё
Hello!
This modal works with a hidden checkbox!
Close
Код: Выделить всё
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
.label {
text-align: center;
padding: 0px;
--tw-bg-opacity: 1;
background-color: rgb(55 65 81 / var(--tw-bg-opacity));
border-width: 0px;
overflow: auto;
width: 50%;
height: 60%;
display: inline-flex;
min-height: 3rem;
flex-shrink: 0;
cursor: pointer;
user-select: none;
--tw-border-opacity: 1;
outline-color: var(--fallback-bc,oklch(var(--bc)/1));
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
min-height: 3rem;
flex-shrink: 0;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
flex-wrap: wrap;
align-items: center;
justify-content: center;
border-radius: var(--rounded-btn, 0.5rem);
border-color: oklch(var(--btn-color, var(--b2)) / var(--tw-border-opacity));
font-size: 0.875rem;
line-height: 1em;
gap: 0.5rem;
font-weight: 600;
text-decoration-line: none;
transition-duration: 200ms;
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
transition-property: color, background-color, border-color, opacity, box-shadow, transform;
--tw-text-opacity: 1;
color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
}
* {
box-sizing: border-box;
border-style: solid;
}
@media (prefers-reduced-motion: no-preference) {
.label {
animation: button-pop var(--animation-btn, 0.25s) ease-out;
}
}
.the-svg {
overflow: auto;
width: 85%;
height: 100%;
display: block;
text-align: center;
--tw-bg-opacity: 1;
cursor: pointer;
font-size: 0.875rem;
line-height: 1em;
font-weight: 600;
--tw-text-opacity: 1;
color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
--tw-border-opacity: 1;
white-space: pre-wrap;
}
@keyframes button-pop {
0% {
transform: scale(var(--btn-focus-scale, 0.98));
}
40% {
transform: scale(1.02);
}
100% {
transform: scale(1);
}
}Код: Выделить всё
Подробнее здесь: https://stackoverflow.com/questions/787 ... hild-svg-e
