Question

您好，这是我的网站，请查看页脚http://www.abiglittlebiz.com/trevelle/

我希望垂直线完全像这样。

Please see this image

在这里你可以看到我试图改变的网站页脚 footer.html这是我的页脚

<footer>

<div class="col-sm-12">
  <div class="row">
  <div class="col-sm-7 seven-three">
    <div class="row">
      <div class="col-sm-4 customer">
      <h3>Customer Service</h3>
            <p>Unit 36/65 Marigold St,Revesby
            NSW 2212 <br>
            P | (02) 9773 8773
            <br>
            F | (02) 977 8125
            <br>
            E | info@trevelle.com.au</p></div>
      <div class="col-sm-4 company">

      <h3>The Company</h3>
              <ul>
                  <li><a href="ourprofile.html">Our Profile</a></li>
                  <li><a href="home.html">Home Designs</a></li>
                  <li><a href="showcase.html">Showcase</a></li>
                  <li><a href="commercial.html">Commercial</a></li>
                  <li><a href="career.html">Career</a></li>
                  <li><a href="Blog.html">Blog</a></li>
                  <li><a href="toc.html">Terms & Conditions</a></li>
              </ul></div>
      <div class="col-sm-4 dc">

      <h3>Our Display Center</h3>
                <ul>
                    <li><a href="">Freemans Ridge Estate</a></li>
                    <li><a href="">Homeworld Camden South</a></li>
                    <li><a href="">Brooks Beach Estate Horsley</a></li>
                </ul>
            </div>
    </div>
  </div>
  <div class="col-sm-5 five-two">
    <div class="row">
      <div class="col-sm-6 lp"> 
<h3>House & Landing Packages</h3>
      <ul>
          <li><a href="">House & Landing Packages</a></li>
          <li><a href="">Display Homes for sale</a></li>
      </ul>
                </div>
      <div class="col-sm-6 nl">
      <h3>Newsletter</h3>
    <p>Be the first to know about Trevelle Special offers</p>
    <i class="fa fa-envelope fa-2x"></i>
    <form>
        <label for="email">Email Address: <span class="required">*</span></label>
        <input type="email" id="email" name="email" value="" placeholder="johndoe@example.com" required="required" />

<button type="submit" class="btn btn-default">
                <i class="fa fa-play"></i>
            </button>
    </form>
<h4>Join The Conversation</h4>
<i class="fa fa-facebook fa-2x"></i>
<p class="join">Join Us in the conversion on property we are active on facebook</p>
    </div>
    </div>
  </div>
  </div>
</div>
<div class="copyright">
    <h3>Copyright @2015</h3>
    <p>Site designed by</p>
</div>
</footer>

Answer 1

看起来你的内容需要一些相等的填充。添加以下CSS：

.seven-three .customer h3,
.seven-three .customer ul,
.seven-three .company h3,
.seven-three .company ul,
.seven-three .dc h3,
.seven-three .dc ul,
.five-two .lp h3,
.five-two .lp ul {margin: 0; padding: 0 10px; position: static;}
.seven-three .customer h3,
.seven-three .company h3,
.seven-three .dc h3,
.five-two .lp h3 {padding-top: 15px;}

等高：

.seven-three .customer,
.seven-three .company,
.seven-three .dc,
.five-two .lp {height: 350px;}

这只是用于重置和添加正确的CSS。它看起来像这样：

页脚边框垂直线对齐

1 个答案: