0

我的网页中有一个页脚，其中嵌套了 3 个带有 twitter bootstraps span4 类的 div。我希望“与我们联系”与“联系我们”标题与左侧的距离相同，而“有用的链接”在中间，每个 div 的所有文本都在下方对齐。

这是我到目前为止所拥有的： 当前的

您可以看到“联系我们”离左边缘比“与我们联系”离右边缘更近。

我尝试对标题使用文本对齐，但下面的列表项不与元素左对齐。

这是一张图片，它显示了标题上的 text-align 是什么样的。您可以看到它们按我想要的方式布局，但它们下面的内容没有与它们对齐： 与文本对齐

这是页脚的 HTML：

<footer class="footer">
        <div class="row-fluid">
          <div class="span12">
            <div class="span4" id="leftFooter">
              <h5><b>Contact Us</b></h5>
               <ul>
                <li><a href="#">Tel: 01234 567897</a></li>
                <li><a href="#">E-mail: info@oom.com</a></li>
              </ul>
            </div>
            <div class="span4" id="middleFooter">
              <div class="middle"><h5><b>Useful Links</b></h5>
              <ul>
                <li><a href="#">Contact Us</a></li>
                <li><a href="#">About Us</a></li>
                <li><a href="#">Copyright Information</a></li>
                <li><a href="#">Terms & Conditions</a></li>
              </ul> </div>
            </div>
            <div class="span4" id="rightFooter">
               <h5><b>Connect With Us</b></h5>
              <ul>
                <li><img src="images/facebook/png/FB-f-Logo__blue_29.png" width="29px" height="29px"><a href="#" class="follow"> Facebook</a></li>

                <li><img src="images/twitter/twitter-bird-white-on-blue.png" width="29px" height="29px"><a href="#" class="follow"> Twitter</a></li>

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

下面是页脚的 CSS：

    .footer {
      padding: 10px;
      position: relative;
      color: #ccc2a0;
      background-color: #333333;
      height: 150px;
      clear:both;
      padding-top:20px;
    } 

    .footer ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    #leftFooter {
        color: #ccc2a0;
        padding-left: 50px;
    }

    #middleFooter {
        color: #ccc2a0;
        /* text-align: center; */
    }

    #rightFooter {
        padding-right: 50px;
        /*text-align: right; */
        color: #ccc2a0;
    }

    #rightFooter li {
        padding-top: 5px;
    }
.follow { line-height: 19px; }

任何人都可以帮忙吗？谢谢

编辑：这是我对右页脚所做的更改：

<div class="span4" id="rightFooter">
               <div class="trow"> <h5 class="tcell"><b>Connect With Us</b></h5> </div>
              <ul>
                <div class="trow"> <li class="tcell"><img src="images/facebook/png/FB-f-Logo__blue_29.png" width="29px" height="29px"><a href="#" class="follow"> Facebook</a></li> </div>

                <div class="trow"> <li class="tcell"><img src="images/twitter/twitter-bird-white-on-blue.png" width="29px" height="29px"><a href="#" class="follow"> Twitter</a></li> </div>
              </ul>
            </div>

CSS：

.trow {
    display: table-row;
    background-color: green;
    margin-right: 0;
}

.tcell {
    display: table-cell;
    background-color: green;
}   

.trow h5 {
    display: table-row;
    background-color: yellow;
}

这是行和单元格着色后的样子： 在此处输入图像描述

4

2 回答 2

0

我重命名了您的一些 CSS id 并删除了 HTML 中的一些标记，例如b标签（不确定您为什么使用它）。你的＆符号&应该是&amp;。

添加了几个 DIV.outer并将.inner第二个的内容居中.span4但保持左对齐。最主要的是float: left;在.outer其上设置其内容的宽度.outer。您也可以使用display: inline-block;代替float: left;. .outer向左移动 50% 的容器，然后.inner向右移动 50% 的容器 ( .outer)。最后，它最终在.span4.

第三个.span4我们添加了一个带有类的 DIV，该类.pull-right来自您的 Twitter Bootstrap，它将事物向右浮动。这会将所有内容设置为第三个的右侧，.span4而无需重新对齐文本。

.footer {
     padding: 10px;
     position: relative;
     color: #ccc2a0;
     background-color: #333333;
     height: 150px;
     clear:both;
     padding-top:20px;
} 

.footer ul {
     list-style: none;
     padding: 0;
     margin: 0;
}
#contact-us {
     padding-left: 50px;
}
.outer {
     position: relative;
     left: 50%;
     float: left;
}
.inner {
     position: relative;
     right: 50%;
}
#connect-with-us {
     padding-right: 50px;
}
#connect-with-us li {
     padding-top: 5px;
}
#connect-with-us a {
     padding-left: 5px;
}
.follow {
     line-height: 19px;
}

<footer class="footer">
     <div class="row-fluid">
          <div class="span12">
               <div id="contact-us" class="span4">
                    <h5>Contact Us</h5>
                    <ul>
                         <li><a href="#">Tel: 01234 567897</a></li>
                         <li><a href="#">E-mail: info@oom.com</a></li>
                    </ul>
               </div>
               <div class="span4">
                    <div class="outer">
                         <div class="inner">
                              <h5>Useful Links</h5>
                              <ul>
                                   <li><a href="#">Contact Us</a></li>
                                   <li><a href="#">About Us</a></li>
                                   <li><a href="#">Copyright Information</a></li>
                                   <li><a href="#">Terms &amp; Conditions</a></li>
                              </ul>
                         </div>
                    </div>
               </div>
               <div id="connect-with-us" class="span4">
                    <div class="pull-right">
                         <h5>Connect With Us</h5>
                         <ul>
                              <li><img src="images/facebook/png/FB-f-Logo__blue_29.png" width="29px" height="29px"><a href="#" class="follow">Facebook</a></li>
                              <li><img src="images/twitter/twitter-bird-white-on-blue.png" width="29px" height="29px"><a href="#" class="follow">Twitter</a></li>
                         </ul>
                    </div>
               </div>
          </div>
     </div>
</footer>
于 2013-07-18T19:08:43.317 回答
0

您可以使用display: table-cell使块表现为表格单元格，可以进一步设置样式以使它们具有相同的宽度。

您也可以浮动块或使用display: inline-block并给每个块三分之一的宽度，但是在缩放时可能会出现舍入错误，这可能导致最后一个块跳转到下一行。当块的行为类似于table-cells时，您就没有这个问题。

于 2013-07-17T22:32:44.640 回答