html - cshtml按钮上下对齐

Question

我在弹出窗体中有 3 个按钮。我想在顶部对齐第一个按钮，在第二行/行对齐其他两个按钮。我已经实现了下面的方法，但在顶部按钮位于顶部但没有将内容和底部网格中的两个按钮包装在一起的地方失败了。我如何操作按钮？

这是我的 html:

<div>
<table>
<tr><td colspan="2"><a href="#" id="acc_popup" data-role="button" data-rel="back" data-theme="c">Btn1</a></td></tr>
<tr>
<td><a href="#" id="acc_popup" data-role="button" data-rel="back" data-theme="c">Btn2</a></td>
<td><a href="#" id="acc_popup" data-role="button" data-rel="back" data-theme="c">Btn3</a></td>
</tr>
</table> 
</div> 

它们的样子:

谢谢。

Answer 1

您在这里遇到的主要问题是您正在尝试应用 #acc_popup 中的样式同一页面上多个元素的 CSS 选择器。

id标签在 DOM 结构中必须是唯一的，多次出现它们将导致您的样式或脚本仅应用于第一次出现的 id。

交换类的 id。

在 HTML 中:

<td><a href="#" class="acc_popup" data-role="button" data-rel="back" data-theme="c">Btn</a></td>

在 CSS 中:

.acc_popup {
   //styles go here
}

编辑:

既然您已经通知我们您没有使用 CSS 来执行此操作。这应该可以满足您的要求。

将第一个按钮包裹在 <td> 中并添加 colspan=2到那个元素。如果不是很清楚，这会使表格单元格跨越 2 列而不是默认的 1 列。

<div>
  <table>
    <tr>
      <td colspan="2"><a href="#" id="acc_popup" data-role="button" data-rel="back" data-theme="c">Btn1</a></td>
    </tr>
    <tr>
      <td><a href="#" id="acc_popup" data-role="button" data-rel="back" data-theme="c">Btn2</a></td>
      <td><a href="#" id="acc_popup" data-role="button" data-rel="back" data-theme="c">Btn3</a></td>
   </tr>
  </table> 
</div>