-1

以下是我们的代码目前的设计方式。在一些 div 和表格上。现在唯一的问题是我们想让整个页面出现在页面的中心，而不管任何分辨率。现在页面出现在左边，我也不需要水平滚动。

<body> 


<div id="main" 
<div id=logo>
<table width=1000>
<tr>
<td width=300>
<img src=lo.png  height="100" width="100" >
</td>
<td width=350 align=center>
    <label class=description for=element_1>Ent Page</label>  
</td>
<td width=350 align=right>
</td>   
</tr>
<tr>
<td width=300>
<label class=description >Name:test1</label>
</td>
</tr>
<tr>
<td width=300>
<label class=description >Ent Name:test1</label>
</td>
</tr>
</table>
</div>

<div id="nav"> 
<ul>
<li><a href="login.php">Main Page</a></li>
<li><a href="login.php">Log Out</a></li>
</ul>
</div> 
<div align="left">
//menu here
</div>
<div id=dptions>
<table> 
<tr>
<td width=700 valign="top">


    <form action="db1.php" method="post" name="form1" id=form1 >
    <table id="mainDetails">
    <tr>

        </tr>

        </table>
        </form>
</td>
<td width=350 valign="top" align=left>
       <h2 class="form_desicription">Actives</h2>
       <table >
       <tr id="gridHeader">
               <td width="5%">
                No.
                </td> 
                <td width="25%">
                Active
                </td>               
                <td width="25%">
                Date Time Insert
                </td>               
                <td width="10%">
                Details
                </td>

            </tr>
            </table>
</td>

</tr>

</table>

</div>
<div id="nav"> 
<ul>
<li><a href="login.php">Main Page</a></li>
<li><a href="login.php">Log Out</a></li>
</ul>
</div> 

</div>

</body>

下面是我的完整 .css 文件。

*

     { 
    padding:0px; 
    margin:0px; 
    } 
    body 
    { 
    background:#ffffff; 
    font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif; 
    font-size:small; 
    margin: 0 auto; 
    padding:0; 

    } 

    #nav 
    { 
    background-color:#ccc; 
    height:19px; 
    width:1024px; 
    font-family:Calibri;
    }

    #nav ul {
    list-style-type: none;
    }

    #nav li {
        float: left; position: relative;
    }

    #nav li a {
    padding-right: 20px;
    padding-left: 15px;
    display: block;
    line-height: 20px;
    text-decoration: none;
    font-family: Calibri;
    font-size: 15px;
    color: #371C1C;
    }

    #nav a:hover,
    #nav a:focus {
        text-decoration:none;
    }

    h2.form_desicription
    {
        clear:left;
        font-family: Calibri;
      font-size: 18px;
      color: #371C1C;

    }


    input.text
    {
        background:#fff url(../../../images/shadow.gif) repeat-x top;
        border-bottom:1px solid #ddd;
        border-left:1px solid #c3c3c3;
        border-right:1px solid #c3c3c3;
        border-top:1px solid #7c7c7c;
        color:#333;
        font-family: Calibri;
        font-size:15px;
        font-weight:700;
        line-height:normal;
        padding:2px 0;
    }

    input.radio
    {
        color:#333;
        font-family: Calibri;
        font-size:15px;
        font-weight:700;
        line-height:normal;
        padding:2px 0;
    }
    input.checkbox
    {
        color:#333;
        font-family: Calibri;
        font-size:15px;
        font-weight:700;
        line-height:normal;
        padding:2px 0;
    }

    label.description
    {
        border:none;
        color:#222;
        display:block;
        font-family: Calibri;
        font-size:15px;
        font-weight:700;
        line-height:150%;
        padding:0 0 1px;
    }

    label.list
    {
        border:none;
        color:#222; 
        font-family: Calibri;
        font-size:15px;
        font-weight:700;
        line-height:150%;
        padding:0 0 1px;
    }

    input.file
    {
        color:#333;
        font-family: Calibri;
        font-size:13px;
        font-weight:700;
        line-height:150%;
        margin:0;
        padding:2px 0;
    }

    select.select
    {
        color:#333;
        font-family: Calibri;
        font-size:15px;
        font-weight:700;
        line-height:normal;
        padding:2px 0;
    }

    textarea.textarea
    {   
        color:#333;
        font-family: Calibri;
        font-size:15px;
        font-weight:700;
        margin:1px 0;
        padding:1px 0 0;
        border-bottom:1px solid #ddd;
        border-left:1px solid #c3c3c3;
        border-right:1px solid #c3c3c3;
        border-top:1px solid #7c7c7c;
    }

    input.button_text
    {
        overflow:visible;
        padding:0 7px;
        width:auto;
    }

    .buttons input
    {
        font-family: Calibri;
        font-size:13px;
        font-weight:700;
        margin-right:5px;
    }

    span.required
    {
        border:none;
        color:red;
        display:block;
        font-family: Calibri;
        font-size:15px;
        font-weight:700;
        line-height:150%;
        padding:0 0 1px;
    }

    #gridHeader 
    { 
    background-color:#ccc; 
    font-size:12px;
    font-color:#ffffff;
    font-family:Calibri;
    }

    #gridRow 
    { 
    background-color:#EFEEEE; 
    font-size:12px;
    font-family:Calibri;
    }
    #gridRow10 
    { 
    background-color:#EFEEEE; 
    font-size:8px;
    font-family:Calibri;
    }

    p.error
    {
        border:none;
        color:red;
        display:block;
        font-family: Calibri;
        font-size:12px;
        font-weight:700;
        line-height:150%;
        padding:0 0 1px;
    }
    span.clearSearch
    {
        font-family: Calibri;
        font-size:12px;
        font-weight:700;
        line-height:150%;
    }
    span.statusOk
    {
        color: blue;
        font-family: Calibri;
        font-size:14px;
        font-weight:700;
        line-height:150%;

    }
    span.statusFailed
    {
        color:red;
        font-family: Calibri;
        font-size:14px;
        font-weight:700;
        line-height:150%;

    }

    .show 
    {  
        display: block;  
        visibility: visible;
    }
    .hide 
    {  display: none;  
        visibility: hidden;
    }
4

1 回答 1

1

而不是给表格宽度给你的“#main”

使用以下代码：

#main{
    margin:0 auto;
    width: 1000px;
}

参考这个小提琴：http: //jsfiddle.net/pdsPj/

希望这可以帮助！

于 2013-10-01T18:22:44.253 回答