如何在子菜单中添加间隙/空间

Question

我对编辑代码一点也不熟悉，并且很难为自己构建这个 WordPress 网站 (https://danielpainter.at)（欢迎加入该网站）。

如何在子菜单中的按钮之间创建距离（间隙/空间）？

现在：现在

应该是： 应该是

受影响的代码应该是

<ul class="sub-menu">
    <li id="menu-item-3259" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3259"><a href="https://www.danielpainter.at/personen/?customize_changeset_uuid=a01ae230-11ac-4842-b96d-97f9812df568&amp;customize_messenger_channel=preview-0&amp;customize_autosaved=on"><span>Personen</span></a></li>
    <li id="menu-item-4657" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4657"><a href="https://www.danielpainter.at/urbex/?customize_changeset_uuid=a01ae230-11ac-4842-b96d-97f9812df568&amp;customize_messenger_channel=preview-0&amp;customize_autosaved=on"><span>Urbex</span></a></li>
</ul>

CSS

.navigation .sub-menu, .navigation .children {
    top: 100%;
}
.navigation .sub-menu, .navigation .children {
    position: absolute;
    background: #ffffff;
    width: 200px;
    left: 0;
    top: 60px;
    border: 1px solid #464646;
    text-transform: uppercase;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    z-index: 5;
}

我对编辑代码一点也不熟悉

Answer 1

<ul style="display: flex; flex-direction: column; gap: 10px;">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

您应该为列表定义 flex ，而不是为示例定义 column 的方向。您应该如上所述定义“gap”属性。

还有如何使用 css 做到这一点：

ul {
  display: flex;
  flex-direction: column;
  gap: 10px; /* Adjust the gap as needed */
}