Question

这是我第一次尝试语义ui。

我遇到了这个问题：

我的标签使身体移动，这很烦人，我无法找到任何解决方案。我看了一下doc，甚至还有一些例子被打破了：/

HTML：

<div class="ui middle aligned center aligned grid">
<div class="column">
    <h2 class="ui teal image header">
        <img src="app/assets/images/logo.png" class="image">
        <div class="content">
            Log-in to your P4$Q account
        </div>
        <img src="app/assets/images/logo.png" class="image">
    </h2>
    <div class="ui large form">
        <div class="ui segment" style="background-color: #2b2b2b;">
            <div class="ui secondary pointing menu">
                <a class="active item" data-tab="first">
                    Home
                </a>
                <a class="item" data-tab="second">
                    Messages
                </a>
                <a class="item" data-tab="third">
                    Friends
                </a>
                <div class="right menu">
                    <a class="ui item">
                        Logout
                    </a>
                </div>
            </div>
            <div class="ui bottom attached active tab segment" data-tab="first">
                First
            </div>
            <div class="ui bottom attached tab segment" data-tab="second">
                Second
            </div>
            <div class="ui bottom attached tab segment" data-tab="third">
                Third
            </div>
        </div>
    </div>
</div>

祝你好运

Answer 1

我检查了小提琴。请在下面找到工作的JSFiddle。

JSFiddle Demo

问题在于，样式表sematic.min.css正在添加如下所示的类。

.ui.segment[class*="bottom attached"]:last-child {
    margin-bottom: 0;
}

仅删除最后一个元素的边距。因此，您正面临着这个问题。

最简单的解决方法是，添加另一个具有相同名称的类并设置默认边距和边框，如下所示，但将!important添加到CSS属性中！这样它就不能被sematic.min.css

中存在的同一个CSS覆盖

.ui.segment[class*="bottom attached"]:last-child {
    margin-bottom:1rem !important;
}

我正在写这个答案的意见是sematic.min.css不需要改变，否则如果你愿意修改sematic.min.css你只需要在文本编辑器中打开文件并设置值如上所述，但!important不是必需的，因为我们正在修改源本身！

由于CSS，似乎有很小的变化。

.ui.attached:not(.message) + .ui.attached.segment:not(.top) {
    border-top: none;
}

要解决此问题，您需要转到sematic.min.css并删除此CSS样式。

但这是一个非常小的改变，我猜是可以忽略的！

标签移动身体

1 个答案: