按钮自动大小为 0px x 0px答案

【问题标题】：Button automatically sizes to 0px x 0px按钮自动大小为 0px x 0px
【发布时间】：2016-01-10 22:01:50
【问题描述】：

我正在尝试在一个单元格中制作一个带有 ImageButton 的表格。

我的表是这样实现的：

<table class="features-table">
                <thead>
                           <tr>
                               <td></td>
                               <td>1</td>
                               <td>2</td>
                               <td>3</td>
                               <td>4</td>
                               <td>5</td>
                               <td>6</td>
                               <td>7</td>
                               <td>8</td>
                               <td>9</td>
                               <td>10</td>
                               <td>1</td>
                           </tr>
                </thead>
                        <tfoot>
                        </tfoot>
                <tbody>
            <div id="IDDIV" runat="server"></div>
                </tbody></table>

我通过向 div 添加一个 html 字符串来填充我的表格。这个字符串是用这样的方法生成的：

    private string buildHtmlTableString(List<Week> w)
    {
        string result = "";
        foreach (Week element in w)
        {
            string s = "<tr>" +
                        "<td> Week " + element.weekNumber + 
                        "</td>" +
                        "<td>" + element.1 + " €</td>" +
                        "<td>" + element.2 + " €</td>" +
                        "<td>" + element.3 + " €</td>" +
                        "<td>" + element.4 + "</td>" +
                        "<td>" + element.5 + " €</td>" +
                        "<td>" + element.6+ "</td>" +
                        "<td>" + element.7 +" €</td>" +
                        "<td>" + element.8 + "</td>" +
                        "<td>" + element.9 + " €</td>" +
                        "<td>" + element.10 + " €</td>" +
                        "<td>" + "<asp:ImageButton runat=\"server\" ID=\"" + element.1 + "\" Height=\"20px\" Width=\"20px\" OnClick=\"test_Click\" ImageUrl=\"~/detail.ico.ico\"></asp:ImageButton></td>" +
                        "</tr>";
            result = result + s;
        }
        return result;
    }

表格的样式：

#main
{
    width: 960px;
    margin: 160px auto 0 auto;
    background: white;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    padding: 30px;
    border: 1px solid #adaa9f;
    -moz-box-shadow: 0 2px 2px #9c9c9c;
    -webkit-box-shadow: 0 2px 2px #9c9c9c;
}

/*Features table------------------------------------------------------------*/
.features-table
{
  width: 100%;
  margin: 0 auto;
  border-collapse: separate;
  border-spacing: 0;
  text-shadow: 0 1px 0 #fff;
  color: #2a2a2a;
  background: #fafafa;  
  background-image: -moz-linear-gradient(top, #fff, #eaeaea, #fff); /* Firefox 3.6 */
  background-image: -webkit-gradient(linear,center bottom,center top,from(#fff),color-stop(0.5, #eaeaea),to(#fff)); 
}

.features-table td
{
  border-right: 1px solid #cdcdcd;
  height: 50px;
  line-height: 50px;
  padding: 0 20px;
  border-bottom: 1px solid #cdcdcd;
  box-shadow: 0 1px 0 white;
  -moz-box-shadow: 0 1px 0 white;
  -webkit-box-shadow: 0 1px 0 white;
  white-space: nowrap;
  text-align: center;
}

/*Body*/
.features-table tbody td
{
  text-align: center;
  font: normal 12px Verdana, Arial, Helvetica;
  width: 150px;
}

.features-table tbody td:first-child
{
  width: auto;
  text-align: left;
}


.features-table td:nth-child(1)
{
  background: #e7f3d4;  
  background: rgba(179,0,0,0.3);
}

/*Header*/
.features-table thead td
{
  background: rgba(144,144,144,0.15);
  font: bold 12px 'trebuchet MS', 'Lucida Sans', Arial;  
  -moz-border-radius-topright: 10px;
  -moz-border-radius-topleft: 10px; 
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  border-top: 1px solid #eaeaea; 
}

.features-table thead td:first-child
{
  border-top: none;
}

/*Footer*/
.features-table tfoot td
{
  font: bold 1.4em Georgia;  
  -moz-border-radius-bottomright: 10px;
  -moz-border-radius-bottomleft: 10px; 
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  border-bottom: 1px solid #dadada;
}

.features-table tfoot td:first-child
{
  border-bottom: none;
}

我的问题是这些图像按钮未显示在表格中。如果我用 chrome 分析我的页面的 html 代码，我可以看到生成了标签，但是，我不知道为什么，我的按钮大小为 0px x 0px。也许你们中的任何人都知道该怎么做？

【问题讨论】：

标签： c# html asp.net html-table imagebutton

【解决方案1】：

你不能在table 中添加div 而不保持其结构。正如您在萤火虫中看到的那样，您的div 被table 忽略并位于body 内部。结构应该是这样的。

<table class="features-table">
    <thead>
        <tr>
            <td></td>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
            <td>7</td>
            <td>8</td>
            <td>9</td>
            <td>10</td>
            <td>1</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <div id="IDDIV" runat="server"></div>
            </td>
        </tr>
    </tbody>
</table>

无法测试你的代码没有图像，所以不确定这是否能解决问题，但我想你应该从这个开始，这将为你解决很多问题

【讨论】：

【解决方案2】：

我实际上不知道问题所在，但您可以做一些解决方法，直到其他人有解决方案。

不要添加按钮，只需添加图片并使用动态参数将其链接到您的页面。就像您的情况下的周数一样。在您的链接文件中，您只需分析参数，瞧，您知道按下了 tablecoulom。

有兴趣查看其他解决方案！希望对您有所帮助！

【讨论】：

【解决方案3】：

<asp:ImageButton> 是一个 ASP.NET 服务器端控件...因此它需要由 ASP.NET 创建。

您不能只使用<asp:ImageButton> 创建一个字符串并期望系统将其识别为控件。我的猜测是，当您查看呈现的 HTML 时，您实际上看到的是 <asp:ImageButton>，而不是实际控件会产生的内容（即 <input type="image">）。

为了做你想做的事，你需要生成一系列控件，首先使用<asp:Literal>作为普通文本，然后使用<asp:ImageButton>作为按钮。

不要使用<div>，而是使用<asp:PlaceHolder>。

然后大致像这样构建您的控件...

private void buildHtmlTableString(List<Week> w)
{
    var sb = new System.Text.StringBuilder();
    foreach (Week element in w)
    {
        sb.Append("<tr>");
        sb.AppendFormat("<td> Week {0}</td>", element.weekNumber);
        sb.AppendFormat("<td>{0} €</td>", element.1);
        ...
        sb.AppendFormat("<td>{0} €</td>", element.10);
        sb.Append("<td>");
        myPlaceholder.Controls.Add(new System.Web.UI.WebControls.Literal(sb.ToString()));
        sb.Length = 0;

        var imgBtn = new System.Web.UI.WebControls.ImageButton
        {
            ID = element.1.ToString(),
            Width = new System.Web.UI.WebControls.Unit(20),
            Height = new System.Web.UI.WebControls.Unit(20),
            ImageUrl = @"~/detail.ico"
        };
        imgBtn.Click += new System.Web.UI.ImageClickEventHandler(text_Click);
        myPlaceholder.Controls.Add(imgBtn);
        sb.Length = 0;

        myPlaceholder.Controls.Add(new System.Web.UI.WebControls.Literal("</td></tr>");
    }
}

另外，<tbody> 中的 <div> 是无效的 HTML，但以上内容仍将其删除

【讨论】：