Question

我有一个用户控件。在那里，我添加了一个HTML表，其中有一个按钮。我需要将按钮对齐到单元格的底部。我尝试在CSS文件中设置属性，但未应用样式。我做错了什么？

ASCX文件：

<link href="CSSFile.css" rel="stylesheet" type="text/css" />
.
.
.
<td>
  <asp:Button ID="btnOK" runat="server" Text="OK" Width="66px" CssClass="ButtonClass"/>
  <asp:Button ID="btnClose" runat="server" Text="Close" Width="66px"/>
</td>

CSS文件：

ButtonClass
{
  border: thin groove #000000;
  vertical-align: bottom;
  color: #000000;
  background-color: #99FFCC;
}

CSS文件和用户控件位于同一文件夹中。

Answer 1

您需要在单元格上设置样式，而不是按钮本身：

<td class='ButtonCell'>
  <asp:Button ID="btnOK" runat="server" Text="OK" Width="66px" CssClass="ButtonClass"/>
  <asp:Button ID="btnClose" runat="server" Text="Close" Width="66px"/>
</td>

在你的Css中：

.ButtonCell
{
  vertical-align:bottom;
}

Answer 2

应该是：

.ButtonClass
{
  border: thin groove #000000;
  vertical-align: bottom;
  color: #000000;
  background-color: #99FFCC;
}

ButtonClass会引用ButtonClass元素，例如<ButtonClass>...</ButtonClass>（当然，在这种情况下不正确），.ButtonClass指的是具有类ButtonClass的元素

Answer 3

是的，你需要它为“td”元素，而不是按钮。如果您应用于按钮，它将垂直对齐线，该线位于单元格的中心。当您应用于表格单元格时，该行将与单元格的底部对齐。

设置垂直 - 对齐按钮

3 个答案: