Как установить разделитель больше, чем его контейнер с помощью CSS
У меня следующая форма с попутным ветром. Я хочу, чтобы красный разделитель покрывал всю ширину внешнего контейнера. Поэтому мне нужно, чтобы он начинался за 24 пикселя до левого поля (это -ml-6) и заканчивался через 24 пикселя после (он должен быть на 48 пикселей больше).
Я знаю, что могу просто позволить каждому разделу установить свой собственный горизонтальный отступ (px-6), но я хотел бы иметь общий отступ для всех разделов (это px-6) и разделители между разделами, чтобы игнорировать этот отступ.
Как я могу достичь этого?
// deal with the CDN warning
setTimeout(() => {console.clear()});<div class = "grid h-screen w-screen content-center justify-center">
<div class = "grid w-80 gap-4 rounded-lg bg-slate-50 p-4 px-6 shadow-lg">
<div class = "grid gap-2 bg-slate-200">
<div class = "text-lg">Section 1</div>
<div class = "text-sm">Item1 1</div>
<div class = "w-full border-t"></div>
<div class = "text-sm">Item1 2</div>
<div class = "w-full border-t"></div>
<div class = "text-sm">Item1 3</div>
</div>
<div class = "-ml-6 mr-0 w-full border-t-2 border-red-400"></div>
<div class = "grid gap-2 bg-slate-200">
<div class = "text-lg">Section 2</div>
<div class = "text-sm">Item1 1</div>
<div class = "w-full border-t"></div>
<div class = "text-sm">Item1 2</div>
<div class = "w-full border-t"></div>
<div class = "text-sm">Item1 3</div>
</div>
</div>
</div>
<script src = "https://cdn.tailwindcss.com"></script>Примечание: здесь у вас есть пример игровой площадки попутного ветра
Ответы 3
Вы задали немного XY вопрос. Вместо того, чтобы вбивать дополнительную разметку в размер, просто выполните рефакторинг, чтобы вы могли поместить свою рамку на существующий элемент. Вы сказали, что предпочли бы иметь только один класс заполнения, но для этого требуется дополнительная разметка только для стилей. Это не очень хорошая практика.
Скорее всего, вы можете сделать то же самое для элементов интерьера. Вам не нужны дополнительные div только для строки. В целом, ваша разметка становится намного чище.
// deal with the CDN warning
setTimeout(() => {
console.clear()
});border-t-2 border-red-400<div class = "grid h-screen w-screen content-center justify-center">
<div class = "rounded-lg bg-slate-50 shadow-lg">
<div class = "grid w-80 gap-4 ">
<div class = "grid w-80 p-4 px-6">
<div class = "grid gap-2 pb-2 bg-slate-200">
<div class = "text-lg">Section 1</div>
<div class = "text-sm">Item1 1</div>
<div class = "text-sm pt-2 border-t border-gray-400">Item1 2</div>
<div class = "text-sm pt-2 border-t border-gray-400">Item1 3</div>
</div>
</div>
</div>
<div class = "grid w-80 border-t-2 border-red-400">
<div class = "grid w-80 p-4 px-6">
<div class = "grid gap-2 pb-2 bg-slate-200">
<div class = "text-lg">Section 2</div>
<div class = "text-sm">Item1 1</div>
<div class = "text-sm pt-2 border-t border-gray-400">Item1 2</div>
<div class = "text-sm pt-2 border-t border-gray-400">Item1 3</div>
</div>
</div>
</div>
</div>
</div>
<script src = "https://cdn.tailwindcss.com"></script>Но ваш ответ добавляет div для разделителя. На самом деле многие из них. Я в замешательстве.
Я добавляю div для каждого sep (на самом деле это тонкий компонент), но я не добавляю еще один контейнер, чтобы он покрывал всю ширину контейнера. Вы добавляете дополнительный div, окружающий каждый раздел с px-6, я просто добавляю px-6 в большой контейнер, каждый раздел находится внутри этого px, и каждый разделитель увеличивается, чтобы течь за его пределы, без какого-либо дополнительного контейнера.
В таком случае да, есть еще один элемент. Но не для интерьерных, да и общая методика гораздо проще ваших ручных расчетов.
Решение, которое я нашел до сих пор, состоит в том, чтобы использовать -ml-6, чтобы разделитель начинался на 24 пикселя раньше, и использовать calc, чтобы увеличить ширину на 48 пикселей, например так:
<div class = "-ml-6 w-[calc(100%+48px)] border-t-2 border-red-400"></div>
Проблема в w-full (ширина: 100%). Вам просто нужно удалить этот класс (установить ширину по умолчанию «авто»).
Я думаю, когда вы указываете ширину: 100%, родительское дополнение учитывается при расчете ширины.
// deal with the CDN warning
setTimeout(() => {
console.clear()
});<div class = "grid h-screen w-screen content-center justify-center">
<div class = "rounded-lg bg-slate-50 shadow-lg">
<div class = "grid w-80 gap-4 rounded-lg bg-slate-50 p-4 px-6 shadow-lg">
<div class = "grid gap-2 bg-slate-200">
<div class = "text-lg">Section 1</div>
<div class = "text-sm">Item1 1</div>
<div class = "w-full border-t"></div>
<div class = "text-sm">Item1 2</div>
<div class = "w-full border-t"></div>
<div class = "text-sm">Item1 3</div>
</div>
<div class = "-mx-6 border-t-2 border-red-400"></div>
<div class = "grid gap-2 bg-slate-200">
<div class = "text-lg">Section 2</div>
<div class = "text-sm">Item1 1</div>
<div class = "w-full border-t"></div>
<div class = "text-sm">Item1 2</div>
<div class = "w-full border-t"></div>
<div class = "text-sm">Item1 3</div>
</div>
</div>
</div>
</div>
<script src = "https://cdn.tailwindcss.com"></script>Кажется, это сработало, я обновил пример попутного ветра с помощью вашего решения, play.tailwindcss.com/DN1qfcOZn8 спасибо
большое спасибо за ваш ответ, точно, я пытаюсь избежать добавления div только для этого разделителя, посмотрите мой ответ, используя calc и отрицательное левое поле