JSP中点击按钮时出现表单提交及对齐问题求助

问题根源分析 #

你的代码存在两个核心问题：

1. 无效的HTML嵌套：HTML规范明确禁止<button>元素内部包含<a>这类交互式元素，浏览器解析这种结构时会出现行为不一致，比如同时触发按钮的默认提交行为和链接跳转，导致表单意外提交。
2. 按钮默认行为未控制：表单内的<button>如果不指定type属性，默认值是submit，点击时会自动触发表单提交，这也是意外提交的关键原因之一。

解决方案 #

方案1：用链接标签模拟按钮（推荐）

直接使用<a>标签并添加按钮样式，既符合HTML规范，又能避免表单提交问题，同时便于统一控制布局对齐：

<a href="${test}" class="variant-button">
  <span class="variant-button-content">${qualifiers.value}</span>
</a>

然后调整CSS样式，让链接表现得像按钮：

.variant-button {
  display: inline-flex; /* 便于内部内容对齐 */
  align-items: center;
  justify-content: center;
  padding: 8px 16px; /* 按需调整内边距 */
  border: none;
  border-radius: 4px;
  background-color: #你的按钮背景色;
  color: #你的文字颜色;
  text-decoration: none; /* 去掉链接默认下划线 */
  cursor: pointer;
}

.variant-button:hover {
  background-color: #你的hover背景色;
}

方案2：使用按钮标签并禁用默认提交行为

如果必须保留<button>标签，需要显式设置type="button"（阻止默认提交），并通过JS实现跳转：

<button type="button" class="variant-button" onclick="window.location.href='${test}'">
  <span class="variant-button-content">${qualifiers.value}</span>
</button>

同样通过CSS调整布局对齐：

.variant-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  background-color: #你的按钮背景色;
  color: #你的文字颜色;
  cursor: pointer;
}

布局对齐问题的额外提示 #

布局错位通常是因为嵌套元素的默认样式（比如边距、内边距、行高）冲突导致的。使用上述两种方案后，统一了元素结构，再通过display: flex配合align-items和justify-content可以轻松实现内容的垂直水平居中，解决对齐问题。

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