代码之家 › 专栏 › 技术社区 › opensas

如何使用CSS设置大于容器的分隔符

tailwind-css css html

opensas · 技术社区 · 3 年前

我有以下顺风表。我想用红色分隔符盖住外容器的整个宽度。所以我需要它在左边距之前24px开始(这是 -ml-6 )并在24px之后结束(应该大48px)

我知道我可以让每个部分都设置自己的水平填充( 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>

注意:这是 tailwind playground example

0 回复 | 直到 3 年前

isherwood 3 年前

问题是 w-full (宽度:100%)。您只需要删除该类(将宽度设置为默认的“auto”)。

我认为,当您指定宽度时:在计算宽度时,将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>

isherwood 3 年前

你问了一个 XY question 。与其将额外的标记锤击到一定大小,不如进行重构,以便将边界放在现有元素上。您说过您宁愿只有一个填充类,但这需要您有额外的标记来进行样式设置。这不是一个好的做法。

很可能你也可以对你的室内元素做同样的事情。你不应该仅仅为了一行就需要额外的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>

opensas 3 年前

到目前为止,我发现的解决方案是 -ml-6 要使分隔符在24px之前开始,并使用calc放大48px的宽度,如下所示:

<div class="-ml-6 w-[calc(100%+48px)] border-t-2 border-red-400"></div>

看见 tailwind playground