表单内Delete按钮样式与View/Edit不一致的解决方法咨询

要搞定Delete按钮的灰色边框和对齐问题，你需要调整表单的布局样式，同时完善按钮的CSS重置规则：

1. 修改HTML结构 #

给View/Edit按钮加上btn类，给Delete按钮添加btn delete-btn类，同时给外层form新增一个类用于控制布局：

<td>
    <a th:href="@{/appointments/{id}/details(id=${appointment.id})}" class="btn">View</a> |
    <a th:href="@{/appointments/{id}/edit(id=${appointment.id})}" class="btn">Edit</a> |
    <form th:action="@{/appointments/{id}/delete(id=${appointment.id})}" method="post" class="inline-form">
        <input type="hidden" name="_method" value="delete" />
        <button type="submit" class="btn delete-btn">Delete</button>
    </form>
</td>

2. 完善CSS样式 #

.btn {
    display: inline-block;
    margin-right: 10px;
    padding: 8px 12px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    background-color: #007bff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none;
    /* 统一垂直对齐方式 */
    vertical-align: middle;
}

.delete-btn {
    background-color: #dc3545;
    /* 彻底清除按钮默认边框和聚焦高亮 */
    border: none;
    outline: none;
}

/* 让表单变为行内块级，和a标签同行显示 */
.inline-form {
    display: inline-block;
    /* 清除表单默认内外边距 */
    margin: 0;
    padding: 0;
    /* 确保垂直居中对齐 */
    vertical-align: middle;
}

/* 可选：增加hover交互效果 */
.btn:hover {
    opacity: 0.9;
}

关键说明 #

• 消除灰色边框：浏览器默认给button元素自带边框，必须通过border: none强制清除；outline: none可以去掉按钮聚焦时的默认高亮框（如果需要兼顾可访问性，可替换为自定义的focus样式，比如outline: 2px solid #86b7fe）。
• 解决对齐问题：form默认是块级元素会独占一行，设置display: inline-block后就能和a标签在同一行显示；vertical-align: middle确保所有按钮在垂直方向居中对齐，同时清除表单默认的内外边距避免额外留白。

内容的提问来源于stack exchange，提问作者Stefan Jankovic