是否可以在此添加换行/空格并创建一个新的CSS盒子？

[45thj5ej]

我不知道该如何解释，所以这里有一张照片：

在红框所在的位置，我希望“新主题和未读主题”区域有一个单独的“框/气泡”。在波浪红线所在的位置，我希望该区域留出空白，然后在“跟踪”铃铛图标下方，也让它成为一个单独的“框/气泡”。基本上，我试图让这个变成两个带有间距的圆角边框。本质上，我只是想将“新主题和未读主题”区域与它上面的内容分开。这可能吗？如果可能，请告诉我如何操作。

看起来“主题”区域有一个 ID 为 suggested-topics 的 div，类名为 more-topics__list，我认为已经包围所有内容的整个圆角框是 main-outlet，但我无法确定上面的“跟踪”铃铛图标所在区域是哪个。

所以，我希望它看起来像这样：

红框表示我上面提到的“框/气泡”。它们之间的橙色线是我希望它们之间留出的空白。是的，我已经阅读了所有通常推荐的 CSS 主题等内容。我尝试了大约 6 小时后仍然无法弄清楚。从我的尝试来看，如果我这样做：

.more-topics__list{
  display:none;
}

然后它基本上会移除“跟踪”铃铛图标和底部“想阅读更多？…”之间的所有内容，但这并没有真正帮助我，因为我想保留内容，只是将这些部分分开。

[manuel (Manuel Kostka)]

您需要更改基础模板才能将这些部分拆分为两个容器。我认为您无法仅使用 CSS 来调整默认模板，因为：

@45thj5ej

所有内容都被 main-outlet 包围

并且默认模板上没有其他包装器。

[pfaffman (Jay Pfaffman)]

您可以检查那里是否有插件插槽

[Don]

你好

我猜你正在使用 Discourse Air 主题。

你可以实现类似这样的效果。

通用 CSS

body.archetype-regular,
body.archetype-banner,
body.archetype-private_message {
  #main-outlet {
    margin-top: 30px;
    margin-bottom: 0px;
    background: transparent !important;
    box-shadow: none;
    padding: 0em 0em 5%;
    width: 100% !important;
  
    #topic-title {
      margin-bottom: 0;
      background: var(--secondary);
      padding: 3em 3em 1em;
      border-radius: 1em 1em 0 0;
    }
  
    .container.posts {
      margin-bottom: 0;
      background: var(--secondary);
      padding: 0 3em var(--below-topic-margin);
    }
  
    .topic-above-footer-buttons-outlet.presence {
      margin: 0;
      padding: var(--below-topic-margin) 0;
      background: var(--secondary);
    }
  
    #topic-footer-buttons {
      max-width: 100%;
      background: var(--secondary);
      border-radius: 0 0 1em 1em;
      margin: 0;
      padding: var(--below-topic-margin) 3em 1em;
    }
  
    .more-topics__container {
      border-radius: 1em;
      background: var(--secondary);
      max-width: 100%;
      padding: 3em;
    }
  }
}

[manuel (Manuel Kostka)]

哈哈，这个选项我绝对不会考虑，因为工作量太大了！干得好，@Don

[45thj5ej]

非常感谢您的回复！