Question

我在用户控件中有以下代码：

<%@ 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天 1d 11h 30m

测试代码背后的代码：

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）水平对齐，如下所示：

enter image description here

如果我在我的开发机器上本地测试页面，那可以正常工作，但是当我将它上传到IIS服务器时，它会搞砸并垂直列出它们，如下所示：

enter image description here

我该如何解决这个问题？

来自源视图的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

Answer 1

好的，不同浏览器和不同版本的问题似乎有所不同。

Answer 2

<!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;
            background-color: White; 
            border-color: Black; 
            border-width: 1px; 
            border-style: Solid; 
            font-family: Arial;
            width: 100%;
        }

        td {
            padding: 0px 0px 5px 0px;
        }

        .HeaderPadding {
            padding: 0px 0px 10px 0px;
        }
        div.outer {
            display: block;
            width: 1000px;
        }
        div.inner {
            display: inline-block;
        }
    </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>
    <div class="outer" >
        <div class="inner">
            <table id="test0_tblCell" class="RowBGImage">
                <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>

        <div class="inner">
            <table id="test1_tblCell" class="RowBGImage">
                <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>

        <div class="inner">
            <table id="test2_tblCell" class="RowBGImage">
                <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>

        <div class="inner">
            <table id="test3_tblCell" class="RowBGImage">
                <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>

        <div class="inner">
            <table id="test4_tblCell" class="RowBGImage">
                <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>
    </div>
</body>
</html>

。你能看看吗如果只需要3个div，则更改外部DIV的大小。我已经给出了修复宽度，这样即使你减小浏览器的大小，它也会保持不变。

display：inline-block并不总是有效

2 个答案: