【问题标题】:CSS position a button inside gridview cell (ASP.NET)CSS在gridview单元格内放置一个按钮(ASP.NET)
【发布时间】:2018-03-06 14:03:54
【问题描述】:

我一直在努力将编辑按钮放置在单元格右上角的 gridview 单元格内。行高因行而异,因此我不能使用 CSS 高度,并且内部 div 不会填满行的整个高度。 基本上我希望模板字段 (td) 内的所有 div 与整个表格行 (tr) 的高度相同。 我附上了两张我得到的和我想要的照片。有人可以帮忙吗?

<asp:TemplateField HeaderText="Префикс GS1" SortExpression="gs1prefix">
    <ItemTemplate>
        <div style="width:110px;">
            <div style="top:0;right:0">
                <div style="font-size:0.6em;">
                    <asp:LinkButton runat="server" ID="lnkEdit2" CommandName="Edit" Text="(Изменить)" />
                </div>
            </div>
           <asp:Label runat="server" Font-Bold="true" ID="lblPartnersGs1Prefix" Text='<%# Eval("gs1prefix") %>' />
       </div>
    </ItemTemplate>
</asp:TemplateField

我得到了什么:

我想得到什么:

更新: 这是生成的 HTML:

<td align="center" valign="middle">
    <div style="width:110px;">
        <div style="top:0;right:0">
            <div style="font-size:0.6em;">
                <a id="ContentPlaceHolder1_gvPartners_lnkEdit2_0" href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$gvPartners$ctl02$lnkEdit2','')">(Изменить)</a>
            </div>
        </div>
        <span id="ContentPlaceHolder1_gvPartners_lblPartnersGs1Prefix_0" style="font-weight:bold;">501028410</span>
    </div>
</td>

还有样式表片段:

.ColoredGridView{
    background-color:white;
}

.ColoredGridView td {
    background-color: #9deef1;
    border-style: none;
    border-width: 0;
    padding: 8px;
}

.ColoredGridView td a
{
    border-bottom: 1px dotted;
    text-decoration-line:none;
}

【问题讨论】:

  • 打开检查,复制您的代码正在生成的 html 部分并将其发布在此处。大大增加了获得良好和快速答案的机会。
  • 更好,create a plunkr.

标签: c# css asp.net gridview


【解决方案1】:

有两种方法可以解决这个问题

<asp:LinkButton runat="server" cssClass="myClass" ID="lnkEdit2" CommandName="Edit" Text="(Изменить)" />

在你的 CSS 中创建一个类,然后根据你的需要定位它

或

<asp:LinkButton runat="server" style="text-align: right; vertical-align: top;" ID="lnkEdit2" CommandName="Edit" Text="(Изменить)" />

【讨论】:

  • 我希望按钮在右上角,而不是在中间
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2019-08-10
相关资源
最近更新 更多