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>