【发布时间】：2013-09-26 03:30:44
【问题描述】：
我在用户控件中有以下代码：
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="myControl.ascx.cs" Inherits="myControl" %>
<head>
<title></title>
<style>
.RowBGImage
{
background-image:url('tableBG.gif');
background-repeat:repeat-x;
display:block;
}
td
{
padding:0px 0px 5px 0px;
}
.HeaderPadding
{
padding:0px 0px 10px 0px;
}
</style>
123456 78% 类型 3天 1天11小时30米
测试代码背后的代码：
protected void Page_Load(object sender, EventArgs e)
{
for (int i = 0; i < 100; i++)
{
Control myControl = LoadControl("myControl.ascx");
myControl.ID = "test" + i;
Controls.Add(myControl);
}
}
在我后面的代码中，我添加了上面用户控件的多个条目，我希望“框”（每个 div）像这样水平对齐：
如果我在我的开发机器上本地测试页面，那效果很好，但是当我将它上传到 IIS 服务器时，它会变得混乱并垂直列出它们，如下所示：
我该如何解决这种行为？
源代码视图中的 HTML 代码：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
</title><meta http-equiv="X-UA-Compatible" content="IE=edge" />
<style>
.RowBGImage
{
background-image:url('tableBG.gif');
background-repeat:repeat-x;
}
td
{
padding:0px 0px 5px 0px;
}
.HeaderPadding
{
padding:0px 0px 10px 0px;
}
</style>
</head>
<body style="background-color:#003366">
<form method="post" action="Default.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKLTg2Njc2NjM3M2Rk5VNtF6ySWjVFGFUfp3hHlD6Brf8kPq3gyNqaYdvPhTg=" />
</div>
</form>
</body>
</html>
<head>
<title></title>
<style>
.RowBGImage
{
background-image:url('tableBG.gif');
background-repeat:repeat-x;
display:block;
}
td
{
padding:0px 0px 5px 0px;
}
.HeaderPadding
{
padding:0px 0px 10px 0px;
}
</style>
</head>
<div style="display:inline-block">
<table id="test0_tblCell" class="RowBGImage" style="background-color:White;border-color:Black;border-width:1px;border-style:Solid;font-family:Arial;">
<tr style="font-family:Arial Black;">
<td class="HeaderPadding" align="left">361299</td><td class="HeaderPadding" align="right">78%</td>
</tr><tr>
<td>Type</td>
</tr><tr>
<td> 3 Days</td>
</tr><tr>
<td><span style="font:bold;font-size:xx-large;">1d 11h 30m</span></td>
</tr>
</table>
</div>
<head>
<title></title>
<style>
.RowBGImage
{
background-image:url('tableBG.gif');
background-repeat:repeat-x;
display:block;
}
td
{
padding:0px 0px 5px 0px;
}
.HeaderPadding
{
padding:0px 0px 10px 0px;
}
</style>
</head>
<div style="display:inline-block">
<table id="test1_tblCell" class="RowBGImage" style="background-color:White;border-color:Black;border-width:1px;border-style:Solid;font-family:Arial;">
<tr style="font-family:Arial Black;">
<td class="HeaderPadding" align="left">361299</td><td class="HeaderPadding" align="right">78%</td>
</tr><tr>
<td>Type</td>
</tr><tr>
<td> 3 Days</td>
</tr><tr>
<td><span style="font:bold;font-size:xx-large;">1d 11h 30m</span></td>
</tr>
</table>
</div>
<head>
<title></title>
<style>
.RowBGImage
{
background-image:url('tableBG.gif');
background-repeat:repeat-x;
display:block;
}
td
{
padding:0px 0px 5px 0px;
}
.HeaderPadding
{
padding:0px 0px 10px 0px;
}
</style>
</head>
<div style="display:inline-block">
<table id="test2_tblCell" class="RowBGImage" style="background-color:White;border-color:Black;border-width:1px;border-style:Solid;font-family:Arial;">
<tr style="font-family:Arial Black;">
<td class="HeaderPadding" align="left">361299</td><td class="HeaderPadding" align="right">78%</td>
</tr><tr>
<td>Type</td>
</tr><tr>
<td> 3 Days</td>
</tr><tr>
<td><span style="font:bold;font-size:xx-large;">1d 11h 30m</span></td>
</tr>
</table>
</div>
<head>
<title></title>
<style>
.RowBGImage
{
background-image:url('tableBG.gif');
background-repeat:repeat-x;
display:block;
}
td
{
padding:0px 0px 5px 0px;
}
.HeaderPadding
{
padding:0px 0px 10px 0px;
}
</style>
</head>
<div style="display:inline-block">
<table id="test3_tblCell" class="RowBGImage" style="background-color:White;border-color:Black;border-width:1px;border-style:Solid;font-family:Arial;">
<tr style="font-family:Arial Black;">
<td class="HeaderPadding" align="left">361299</td><td class="HeaderPadding" align="right">78%</td>
</tr><tr>
<td>Type</td>
</tr><tr>
<td> 3 Days</td>
</tr><tr>
<td><span style="font:bold;font-size:xx-large;">1d 11h 30m</span></td>
</tr>
</table>
</div>
<head>
<title></title>
<style>
.RowBGImage
{
background-image:url('tableBG.gif');
background-repeat:repeat-x;
display:block;
}
td
{
padding:0px 0px 5px 0px;
}
.HeaderPadding
{
padding:0px 0px 10px 0px;
}
</style>
</head>
<div style="display:inline-block">
<table id="test4_tblCell" class="RowBGImage" style="background-color:White;border-color:Black;border-width:1px;border-style:Solid;font-family:Arial;">
<tr style="font-family:Arial Black;">
<td class="HeaderPadding" align="left">361299</td><td class="HeaderPadding" align="right">78%</td>
</tr><tr>
<td>Type</td>
</tr><tr>
<td> 3 Days</td>
</tr><tr>
<td><span style="font:bold;font-size:xx-large;">1d 11h 30m</span></td>
</tr>
</table>
</div>
<head>
<title></title>
<style>
.RowBGImage
{
background-image:url('tableBG.gif');
background-repeat:repeat-x;
display:block;
}
td
{
padding:0px 0px 5px 0px;
}
.HeaderPadding
{
padding:0px 0px 10px 0px;
}
</style>
</head>
.... …… ...... 它一直持续到 100
【问题讨论】：
-
感兴趣的不是您的 ASP 代码，而是浏览器中生成的代码。可以发一下吗？
-
@HerrSerker 是正确的，有时 ASP 控件以愚蠢的方式呈现事物，例如（完全不相关的）示例，为单选按钮列表创建表格。
-
生成的代码是指 HTML 和 CSS
-
另外，您似乎没有关闭
<head>标记。 -
好的，我已经粘贴了上面的代码。并且头部标签已关闭（是我的复制和粘贴错误）
标签： c# asp.net css displaytag