cshtml按钮上下对齐答案

【问题标题】：Cshtml button alignment top and bottomcshtml按钮上下对齐
【发布时间】：2014-07-09 12:03:32
【问题描述】：

我在弹出表单中有 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>

它们的样子：

谢谢。

【问题讨论】：

您应该发布您正在使用的 CSS，因为这会导致您出现格式问题。基本上，第一个按钮在表格中占据一整行，因为它在 tr 标签中，而其他两个按钮在 td 标签中。
我没用过css。仅它的html。当我为顶部按钮插入 td 时，它只会变小并恰好位于 btn2 上方。谢谢顺便说一句
有一些 CSS 在某处被加载，因为默认代码如下所示：jsfiddle.net/HLkUD。你用什么来开发这个？您也可以尝试将colspan="2" 添加到顶部 td 以便它占用两列。
我添加了 colspan="2" 并更新了我的答案。你可以检查一下吗？

标签： html css asp.net-mvc razor

【解决方案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>

【讨论】：

是的，我使用来自#acc_popup 的标准样式，但我也尝试了一些CSS 样式，但我失败了。你对 css inline 有什么建议吗？
我在实施您的建议后更新了我的问题。就好像我们快到了，但需要根据左右间隙来填补
所以你需要它来占据整个容器（绿色部分）？
是的@pjmil116。它应该是顶部 %100 和底部 %50 %50