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

agxfikkp 于 2022-11-19 发布在其他

关注(0)|答案(5)|浏览(450)

我想执行类似于justify-content:space-around或justify-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%宽度。
一个
有没有办法做到这一点？

css

来源：https://stackoverflow.com/questions/74218671/how-to-display-x-items-on-left-y-on-middle-and-z-on-right-in-a-row-without-wra

5条答案

按热度按时间

kzmpq1sx1#

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

赞(0）回复(0）举报 2022-11-19

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));
}

中的每一个

# # # # 用法 . 左二 . 中

第一次

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

第一个

赞(0）回复(0）举报 2022-11-19

tyky79it3#

类似这样-在第一个 center 和 right 类上使用左边距自动：
第一个

赞(0）回复(0）举报 2022-11-19

xa9qqrwz4#

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

赞(0）回复(0）举报 2022-11-19

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>

赞(0）回复(0）举报 2022-11-19

我来回答

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

5条答案

# # # # 用法 . 左二 . 中

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

相关问题

热门标签

最新问答

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

5条答案

# # # # 用法 . 左 二 . 中

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

相关问题

热门标签

最新问答

# # # # 用法 . 左二 . 中