display：inline-block并不总是有效
我在用户控件中有以下代码：
<%@ 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）水平对齐，如下所示：
如果我在我的开发机器上本地测试页面，那可以正常工作，但是当我将它上传到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
2 个答案:
答案 0 :(得分：0)
好的，不同浏览器和不同版本的问题似乎有所不同。
答案 1 :(得分：0)
<!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的大小。我已经给出了修复宽度，这样即使你减小浏览器的大小，它也会保持不变。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？