css 如何在一行中显示x项在左侧、y项在中间、z项在右侧,而不使用环绕元素

agxfikkp  于 2022-11-19  发布在  其他
关注(0)|答案(5)|浏览(451)

我想执行类似于justify-content:space-aroundjustify-content:space-between的操作,但使用:

  • x个项目并排在左侧,
  • y个项目并排在中间,
  • z个项目并排显示在右侧。

通过 Package 元素会很简单,但我不能,因为这些项目(.left.middle.right)将是影响下面元素样式的复选框(并且没有得到良好支持的父选择器)。
我找到了this answer来模拟右侧的first-of-class,但没有找到类似于模拟last-of-class的东西。

/* emulate first-of-class */
.container>.right {
  margin-left: auto;
}

.container>.right~.right {
  margin-left: unset;
}

下面是我目前尝试的一个片段:
第一个
我可以通过在display:flex容器中的最后一个左边元素中添加一个特定的类来应用margin-right:auto;,在第一个右边元素中添加一个特定的类来应用margin-left:auto;,但这不是最好的,即使这样,如果左边和右边的部分宽度不同,中间的项也不会居中。
第一个
我目前的目标是根据所选语言显示元素,即使禁用JavaScript也是如此,因此我正在寻找不使用JavaScript的解决方案。
正如HackerFrosch所建议的,我试图通过使用网格来解决它,但我不习惯它,.middle项没有居中,我没有设法使.right div下面的元素默认为100%宽度。
一个
有没有办法做到这一点?

kzmpq1sx

kzmpq1sx1#

css grid layout是解决这个问题的一个方法。如果你愿意的话,你可以自定义这个例子中的位置。我希望这对你有帮助。
第一个

5kgi1eie

5kgi1eie2#

你 可以 尝试 用 * * flex * * 来 解决 这个 问题 , 并 使用 * * calc ( ) * * 函数 来 管理 左边 距 或 右边 距 。 因此 , 我 创建 了 四 个 类 , 用 其中 一 个 来 居中 中间 类 。

/* adjust for left side, put to the first middle label */
.one-left.middle {
  margin-inline-start: calc((4 * var(--block-width) / 2));
}
.two-left.middle {
  margin-inline-start: calc((3 * var(--block-width) / 3));
}

/* adjust for right side, set to the last meddle label */
.one-right.middle {
  margin-inline-end: calc((4 * var(--block-width) / 2));
}
.two-right.middle {
  margin-inline-end: calc((3 * var(--block-width) / 3));
}

中 的 每 一 个

# # # # 用法 . 左 二 . 中

第 一 次

# # # # 用法 . 一 - 右 . 中间

第 一 个

tyky79it

tyky79it3#

类似这样-在第一个 centerright 类上使用左边距自动:
第一个

xa9qqrwz

xa9qqrwz4#

这样做很好地保持了中心,同时仍然允许css选择器。它将保持中心添加更多的元素到左,中,或右容器。中间容器可以有奇数或偶数元素,它仍然会保持中心,只要有足够的空间。
这种方法的局限性是你的标题高度必须是固定的,并且绝对定位的#dynamic_children div top属性必须反映这个值。另外,由于IE 11糟糕的flex实现,这将无法正常工作,而且显然他们永远不会修复这个问题,因为IE 11不再支持。我不确定这对你来说是否重要。
第一个

7gcisfzg

7gcisfzg5#

根据您的要求,您需要使用grid属性。

<!DOCTYPE html>
<html>
   <style>
      .container {
      display: grid;
      grid-template-columns: 50px auto 50px 50px auto 50px 50px 50px;
      }
      input {
      display: none;
      }
      label {
      padding: 0 10px;
      background-color: orange;
      width: 12px;
      }
      #check-center {
      width: 100%;
      text-align: center;
      }
      [ lang ] {
      display: none;
      }
      [ name="language" ]:checked+label {
      background-color: pink;
      }
   </style>
   <body>
      <div class="container">
         <input type="radio" name="left-field" id="A" />
         <label class="left" for="A">A</label>
         <input type="radio" name="left-field" id="B" />
         <label class="left" for="B">B</label>
         <input type="radio" name="middle-field" id="C" />
         <label class="middle" for="C">C</label>
         <input type="radio" name="middle-field" id="D" />
         <label class="middle" for="D">D</label>
         <input type="radio" name="middle-field" id="E" />
         <label class="middle" for="E">E</label>
         <input type="radio" name="language" id="enLang" value="en" />
         <label class="right" for="enLang">en</label>
         <input type="radio" name="language" id="frLang" value="fr" />
         <label class="right" for="frLang">fr</label>
         <input type="radio" name="language" id="esLang" value="es" />
         <label class="right" for="esLang">es</label>
         <div lang="en">EN selected</div>
         <div lang="fr">FR selected</div>
         <div lang="es">ES selected</div>
         <div>
            <div lang="en">EN selected</div>
            <div lang="fr">FR selected</div>
            <div lang="es">ES selected</div>
         </div>
      </div>
   </body>
</html>

相关问题