Question

正如您在图片中看到的那样，右侧的链接未正确固定到我的页脚我该怎么做才能使它正确？我不知道为什么在这两个部分之间我指的是div链接我有很大的距离我也不想要他们之间的距离。

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

enter image description here 如果需要，样式：

    <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>

Answer 1

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

我怀疑你的问题是桌子使用不当

<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;
}

这应该让你的页脚坐在你想要的位置，并在语义上更正确

Answer 2

因此，将#footer内的表格宽度设为100％。＆安培;相应地将<td>的宽度除以百分比。

实际上填充到#footer会将最后一个表格行推到外面，因为填充会增加#footer的宽度，因此将#footer的宽度设置为960px，因为应用的填充是左侧20px＆amp;右。

希望这会对你有帮助！

将文本固定到页脚

2 个答案: