使用Semantic UI将垂直菜单附加到段落的方法

Question

如何使用Semantic-UI CSS框架将垂直菜单附加到段落？当使用文档中提供的标记时，内容和菜单之间会有一个边距（由网格填充导致）。如果不使用网格，则边框不适合。

    <div class="ui grid">
    <div class="row">
        <div class="sixteen wide column">
            <!-- Overlapping border -->
            <div class="ui horizontal segments">
                <div class="ui vertical tabular menu">
                    <a class="active item">Bio</a>
                    <a class="item">Pics</a>
                    <a class="item">Companies</a>
                    <a class="item">Links</a>
                </div>
                <div class="ui segment">
                    This is an stretched grid column. This segment will always match the tab height
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <!-- Margin between the elements -->
        <div class="four wide column">
            <div class="ui vertical fluid tabular menu">
                <a class="active item">Bio</a>
                <a class="item">Pics</a>
                <a class="item">Companies</a>
                <a class="item">Links</a>
            </div>
        </div>
        <div class="twelve wide stretched column">
            <div class="ui segment">
                This is an stretched grid column. This segment will always match the tab height
            </div>
        </div>
    </div>
    <div class="row">
        <!-- Margin between the elements -->
        <div class="four wide column">
            <div class="ui vertical fluid menu">
                <a class="active item">Bio</a>
                <a class="item">Pics</a>
                <a class="item">Companies</a>
                <a class="item">Links</a>
            </div>
        </div>
        <div class="twelve wide stretched column">
            <div class="ui segment">
                This is an stretched grid column. This segment will always match the tab height
            </div>
        </div>
    </div>
    <div class="row">
        <div class="sixteen wide column">
            <!-- Overlapping border -->
            <div class="ui horizontal segments">
                <div class="ui vertical menu">
                    <a class="active item">Bio</a>
                    <a class="item">Pics</a>
                    <a class="item">Companies</a>
                    <a class="item">Links</a>
                </div>
                <div class="ui segment">
                    This is an stretched grid column. This segment will always match the tab height
                </div>
            </div>
        </div>
    </div>
</div>

JSFiddle

我希望垂直菜单可以附加到段落上（就像使用水平菜单时一样）。

- mjoschko

---

所以我对你实际想要的东西感到困惑。你能分享一张截图展示你真正想要的结果吗？我认为在使用UI网格时添加自定义覆盖CSS可以帮助你解决问题。 - Nasir T

感谢您的评论。已将屏幕截图添加到问题中。 - mjoschko

Answer 1

我认为你可以创建一个小的覆盖样式类来修改默认的grid ui和menu类中的一些内容，以实现你想要的效果。以下是一个代码示例，仅包含第一个grid ui示例：http://codepen.io/Nasir_T/pen/dOGGro

- Nasir T

---

非常感谢，但不完全是我要找的。我正在寻找一个特定于Semantic-UI的解决方案，以处理CSS框架提供的所有垂直菜单。例如，对于水平菜单，有“attached”类可将菜单附加到段元素。 - mjoschko

@mjoschko，你能否将垂直选项卡菜单“附加”到选项卡内容上？ - Juuso Ohtonen