如何减少Clarity手风琴组件的宽度？

Question

我正在尝试将手风琴组件添加到我的页面。但是手风琴组件的宽度太长。实际上，如果将它稍微向右移动，我什至看不到正确的边框。

如何更改手风琴边框的宽度？我使用的是here提供的确切代码。它看起来像这样：

Answer 1

有两种方法。

1. 将手风琴放入已设置宽度的容器元素中
2. 在clr-accordion上设置宽度的css类

以下是一些代码示例：

  <section class="accordion-width">
    <h3>Accordion in a container with width set</h3>
    <clr-accordion>
      ...
    </clr-accordion>
  </section>

  <h3>Accordion with width class directly on the element:</h3>
    <clr-accordion class="accordion-width">
      ...
    </clr-accordion>

具有与此类似的样式：

.accordion-width {
  width: 200px;
}

您可以在此处查看工作代码：https://stackblitz.com/edit/so-58505545-accordion-widths

Answer 2

您只能在CSS中使用calc函数将其宽度设置为以80％的百分比将其设置为并将其向右对齐