<a href="#" th:href="@{/}" class="m-item item m-mobile-hide" th:classappend="${n==1} ? 'active'" ><i class="home icon"></i>首页</a> 如何让这个链接变小一点
时间: 2023-08-05 09:07:28 浏览: 48
你可以为这个链接添加一个 CSS 类,然后通过 CSS 来控制链接的大小。例如,你可以添加一个名为 "small-link" 的 CSS 类,并将该类应用于该链接:
HTML 代码:
```
<a href="#" th:href="@{/}" class="m-item item m-mobile-hide small-link" th:classappend="${n==1} ? 'active'" ><i class="home icon"></i>首页</a>
```
CSS 代码:
```
.small-link {
font-size: 14px;
}
```
以上代码将链接的字体大小设置为 14 像素。你可以根据需要调整字体大小。
相关问题
<a href="#" th:href="@{/message/delete/{messageType}(messageType=${messageType})}" class="ui m-inline-block m-text-thin"> 清空<i class="trash icon"></i> </a> 如何设置里面的内容大一点
您可以使用 Semantic UI 中的 `big` 类来增大图标的大小,如下所示:
```
<a href="#" th:href="@{/message/delete/{messageType}(messageType=${messageType})}" class="ui m-inline-block m-text-thin">
清空<i class="trash big icon"></i>
</a>
```
这将在图标上添加 `.big` 类,从而使其变大。您可以根据需要调整图标的大小,使用像 `huge`、`massive` 这样的其他类也可以实现更大的图标。
<div class="right aligned column"> <a href="#" th:href="@{/message/delete/{messageType}(messageType=${messageType})}" class="ui m-inline-block m-text-thin"> <i class="trash icon"></i>清空所有消息</a> </div> 以上代码添加一个提示框,是否要全部清空
您可以使用 Semantic UI 中的 `popup` 组件来添加一个提示框,如下所示:
```
<div class="right aligned column">
<a href="#" th:href="@{/message/delete/{messageType}(messageType=${messageType})}" class="ui m-inline-block m-text-thin">
<i class="trash icon"></i>
<span class="text">清空所有消息</span>
<div class="ui popup">
<div>您确定要清空所有消息吗?</div>
<div class="actions">
<div class="ui negative button">取消</div>
<a href="#" th:href="@{/message/delete/{messageType}(messageType=${messageType})}" class="ui positive button">确定</a>
</div>
</div>
</a>
</div>
```
在上面的示例中,我们添加了一个 `span` 元素来包含文本内容,并将 `popup` 组件添加到父级 `a` 元素中。`popup` 组件的内容是一个简单的提示框,其中包含一条消息和两个按钮,分别用于取消和确认操作。
您可以根据需要调整提示框的样式和内容。