-1

正如您在图片中看到的，右侧的链接没有正确固定到我的页脚我应该怎么做才能使它正确？我不知道为什么在这两个部分之间我的意思是 div 链接我有一个很大的距离我也不希望它们之间有这个距离。

我在页脚中插入了样式和表格。提前致谢

在此处输入图像描述 如果需要，样式：

    <style>
#footer{
    background-image:url(../images/footer.png);
    background-position:inherit;
    background-repeat:no-repeat;
    width:100%;
    height:150px;
    margin:0
    auto;
    text-align: right;
    }
    #links ul {
            list-style-type: none;
            width: 400px;
            float:right;
                text-align: right;
    } 

    #links li {
            border: 1px dotted #999;
            border-width: 2px 0;
            margin: 5px 0;
            float:right;
                text-align: right;
    }

    #links li a { 
            color: #FF6600;
            display: block;
            font: bold 120% Arial, Helvetica, sans-serif;
            padding: 5px;
            text-decoration: none;
            float:right;
            text-align: right;

    }

     * html #links li a {  /* make hover effect work in IE */
        width:600px;
        float:right;
            text-align: right;
    }

    #links li a:hover {
            background: #FFFFFF ;
    }

    #links a em { 
            color: #333;
            display: block;
            font: normal 85% Verdana, Helvetica, sans-serif;
            line-height: 125%;
            float:right; 
            text-align: right;
    }

    #links a span {
            color: #125F15;
            font: normal 70% Verdana, Helvetica, sans-serif;
            line-height: 150%;
            float:right;
    }
    </style>

页脚和文本：

   <div id="footer">
<table width="100%" height="183" align="left" cellpadding="0" dir="ltr">
<tr>
<td width="30%">
 <div id="links">
    <ul>
      <li><a href="#" title="لینک">سرویس های مشتری
       <table width="100%">
        <tr>
        <td width="337" cellpadding="0"><em>ارتباط با ما</em></td>
        </tr>
        <tr><td> <em>ثبت نام</em></td></tr>
        <tr><td> <em>پرسش و پاسخ</em></td></tr>
        </table>
        </a></li> 
    </ul>
  </div> 

  </td>
 <td width="40%">
 <div id="links">
    <ul>
      <li><a href="#" title="لینک">لینک های مفید
        <table width="100%">
        <tr><td width="337">
        <em>لینک یک</em></td></tr>
        <tr><td>
         <em>لینک دو</em>
         </td></tr>
          <tr><td>
         <em>لینک سه</em>
         </td></tr>
         </table>
        </a></li> 
    </ul>
  </div> 
  </td>
   <td width="30%">
 <div id="links">
    <ul>
      <li><a href="#" title="لینک">اخبار
        <table width="100%">
        <tr><td width="337">
        <em>خبر یک</em></td></tr>
        <tr><td>
         <em>خبر دو</em>
         </td></tr>
          <tr><td>
         <em>خبر سه</em>
         </td></tr>
         </table>
        </a></li> 
    </ul>
  </div>
  </td>
  </tr>
  </table>
</div>
4

2 回答 2

1

首先，您真的不应该使用表格进行布局，它在语义上不正确，表格只能用于表格数据。其次，您可以用无效的 aa 标签包围表格。

我怀疑您的问题与表格使用不当有关

<div id="footer">
  <ul class="left">
    <li> <a href="link">links here...</a><li>
  </ul>
  <ul class="right">
     <li> <a href="link">links here...</a><li>
  </ul>
</div>

然后像这样的CSS：

#footer{
  width:100%;
  /* other style here... */
}

.left{
  float:left;
  margin:5px 10px;
}

.right{
  float:right;
  margin:5px 10px;
}

这应该使您的页脚坐在您想要的位置并且在语义上更正确

于 2012-07-25T08:19:40.870 回答
1

所以，让表格的宽度在#footer100% 以内。& 相应地除以<td>百分比的宽度。

实际上 padding to#footer是将最后一个表格行推到外面，因为 padding 增加了宽度，#footer所以使#footerto的宽度960px在左右两侧应用填充为 20px。

于 2012-07-25T10:11:03.370 回答