Question

我在div中有一个表，使用来自twitter bootstrap的span12类，它包含在一个行类div中，全部被页脚标记包围，如下所示：

<footer class="footer">
        <div class="row">
          <div class="span12">
            <table>
              <tr>
                <td> <!-- Contact Us -->
                  <table>
                    <tr>
                      <td><b>Contact Us</b></td>
                    </tr>
                     <tr>
                      <td>Tel: 01234 567897</td>
                    </tr>
                     <tr>
                      <td>E-mail: info@email.com</td>
                    </tr>
                   </table>
                </td>

                <td> <!-- Useful Links -->
                  <table>
                    <tr>
                      <td><b>Useful Links</b></td>
                    </tr>
                    <tr>
                      <td><a href="#">Contact Us</a></td>
                    </tr>
                    <tr>
                      <td><a href="#">About Us</a></td>
                    </tr>
                    <tr>
                      <td><a href="#">Copyright Information</a></td>
                    </tr>
                    <tr>
                      <td><a href="#">Terms & Conditions</a></td>
                    </tr>
                   </table>
                </td>

                <td> <!-- Social -->
                  <table>
                    <tr>
                      <td><b>Connect With Us</b></td>
                    </tr>
                    <tr>
                      <td><a href="#">Facebook</a></td>
                    </tr>
                    <tr>
                      <td><a href="#">Twitter</a></td>
                    </tr>
                    <tr>
                      <td><a href="#">Google Plus</a></td>
                    </tr>
                   </table>
                </td>
              </tr>
            </table>
         </div>
        </div>
      </footer>

我已应用以下CSS：

/* Table Style */

    .footer table {
        table-layout:fixed;
        margin-right: auto;
        margin-left: auto;
        width: 100%
    }

    .footer td b {
        vertical-align:top;
        color: #ccc2a0;
    }

    .footer td {
        vertical-align:top;
        color: #a8a8a8;
    }

我试图让页脚左侧和第一个表格数据之间的空间与页脚右侧和最后一个表格数据之间的空间相同但是它总是有更大的间隙右边。

任何人都可以看到我使用的CSS有问题吗？

由于

编辑：以下是使用divs尝试实现此目的的代码：

<footer class="footer">
    <div class="row" style="background-color:red;">
      <div class="span12" style="background-color:orange;">
        <div class="span4" id="leftFooter">

        </div>
        <div class="span4" id="middleFooter">

        </div>
        <div class="span4" id="rightFooter">

        </div>
      </div>
    </div>
  </footer>

CSS只是对方框进行着色，这样我就可以看到发生了什么，并为div增加了一些高度。 div layout problem

灰色框是页脚div，红色框是行，橙色框是span12。其余的是span4的3个内容div。不知道为什么他们不会停留在同一排。

Answer 1

我更改了部分内容并删除了所有样式（抱歉），但您的间距应该水平固定。你可以应用任何你想要的造型明智的东西。另外，我摆脱了所有的嵌入式桌子，因为它太麻烦......如果你愿意，我可以调整垂直间距，但我只是把它们放在一起，让你对水平间距有所了解。

http://jsfiddle.net/YYZwY/1/

HTML：

<footer class="footer">
  <table>
    <td>
                <div id="ContactUS" class="information">Contact Us</div>
                <div id="Telephone" class="information">Tel: 01234 567897 </div>
                <div id="email" class="information">Email: info@email.com</div>
    </td>
    <td>
                 <div class="links">Useful Links</div>
                 <div class="links"><a href="#">Contact Us</a></div>
                 <div class="links"><a href="#">About Us</a></div>
                 <div class="links"><a href="#">Copyright Information</a></div>
                 <div class="links"><a href="#">Terms & Conditions</a></div>
    </td>
    <td>
                 <div class="connect"><b>Connect With Us</b></div>
                 <div class="connect"><a href="#">Facebook</a></div>
                 <div class="connect"><a href="#">Twitter</a></div>
                 <div class="connect"><a href="#">Google Plus</a></div>
    </td>
</footer>

CSS：

.links {
    padding-left: 10px;
    padding-right: 10px;
    position: relative;
}

.connect {
    padding-left: 10px;
    padding-right: 10px;
    position: relative;
}

.information {
    padding-right: 10px;
}

Answer 2

CSS：

.span12 {
  text-align: center;
}

如果我们不介意文本对齐，则此解决方案有效。

结果[CodePen]：http://codepen.io/loxaxs/pen/kilLG

另一种解决方案：

CSS：

.span12 {
  padding-left: 15%;
}

结果[CodePen]：http://codepen.io/loxaxs/pen/izIHq

div中的中心表

2 个答案: