css - 尽管 float :left and display:inline-block，div 仍不会对齐

Question

我正在尝试拥有三个 <div class="forward-link">对齐到都沿着相同的基线。我试过了 float:left和 display:inline-block ，但似乎没有任何效果。有任何想法吗？该站点是使用 php/Wordpress 制作的，但下面是呈现的 HTML 和 CSS。

此外，http://jsfiddle.net/mugUG/

呈现的 HTML:

<div id="landing-content">
    <div id="landing-brief">
        <ul>
            <li>
                <h2><a href="http://growingedgecoaching.com/blog">Growing Edge Blog</a></h2>
                    <p>“Embrace the messy imperfect genius. Seek to be misunderstood by creative minds.” ~Ross Martin One thing I have learned over the years as an entrepreneur is that when I am in my most creative space, I have to release being a perfectionist and jump into my creative messiness. I need to create space that allows [...]</p>
                <div class="forward-link">
                    <p><a href="http://growingedgecoaching.com/home"><span style="color:#b8bf33">Continue Reading</span></a></p>
                </div><!-- end forward-link -->
            </li>
            <li>
                <h2><a href="index.php?page_id=27">Meet Mary Anne</a></h2>
                <p>Mary Anne is the founder of Growing Edge Coaching™, a coaching and consulting company, where she helps individuals and companies develop powerful strategies to move forward in their life, their work, or their business. Her coaching is founded on her 20 years of experience as a manager and senior leader in non-profits.</p>
                <div class="forward-link">
                    <p><a href="index.php?page_id=27"><span style="color:#b8bf33">More About Mary Anne</span></a></p>
                </div><!-- end forward-link -->
            </li>
            <li>
                <h2><a href="#">Recent Tweets</a></h2>
                <div id="twitter-feed">

                        <ul>
                                                    <li>
                        RT @LollyDaskal: regret is often the result of too many excuses. #leadfromwithin #leadership                            </li>
                                                    <li>
                        What you do in small doses becomes big doses in your life.                          </li>
                                                    <li>
                        RT @ThisIsSethsBlog: Seth's Blog: Two kinds of unique http://t.co/1TJ1Vuf9                          </li>
                                                    </ul>
                    </div><!-- end twitter-feed -->
                <div class="forward-link">
                    <p><a href="https://twitter.com/growing_edge"><span style="color:#b8bf33">Follow @Growing_Edge</span></a></p>
                </div><!-- end forward-link -->
            </li>
        </ul>
    </div><!-- end brief -->
    <div id="landing-social">
        <h1>Growing Edge Coaching™ works with individuals and companies to attain positive actions and powerful results in their work and life.</h1>
        <div id="icons">
            <ul>
                <li><a href="http://www.facebook.com/maryanneflanagan"><img src="http://growingedgecoaching.com/wp-content/themes/twentyeleven/images/facebook.png" alt="Growing Edge Coaching Facebook" id="fb" /></a></li>
                <li><a href="https://twitter.com/growing_edge"><img src="http://growingedgecoaching.com/wp-content/themes/twentyeleven/images/twitter.png" alt="Growing Edge Coaching Twitter" id="tw" /></a></li>
                <li><a href="http://www.linkedin.com/in/maryanneflanagan"><img src="http://growingedgecoaching.com/wp-content/themes/twentyeleven/images/linkedin.png" alt="Growing Edge Coaching Linked In" id="li" /></a></li>
            </ul>
        </div><!-- end icons -->
    </div><!-- end social -->
    <div id="landing-contact-info">
        <p><span>PHONE</span> 917.238-9726 | <span>E-MAIL</span> <a href="mailto:maflanagan@growingedgecoaching.com?Subject=contact via website"><span style="color:#333333">maflanagan@growingedgecoaching.com</span></a></p>
    </div><!-- end contact-info -->
</div><!-- end landing-content -->

CSS

/* Landing Content */

#landing-content {
    background: #f7f7f7;
    clear: both;
    margin-top: 40px;
}

#landing-brief {
    width: 860px;
    margin: 0 auto;
    padding-top: 40px;
}

#landing-brief ul li {
    display: inline-block;
    height: 200px;
    width: 250px;
    position: relative;
    vertical-align: top;
}

#landing-brief ul li:last-child {
    padding-right: none;
}

#landing-brief #twitter-feed {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 75%;
    line-height: 1.5;
    color: #333333;
    margin-left: -28px;
}

#landing-brief #twitter-feed ul li {
    padding-bottom: 5px;
}

#landing-brief .forward-link {
    position: absolute;
    padding-left: 0; 
    padding-bottom: 0;
    padding-top: 10px;
}

Answer 1

那么您的 LI 元素是水平对齐的吗？

您要做的是为所有 LI 元素提供足够高的高度，以容纳每个 LI 中的内容。

然后让LI元素position:relative

然后制作forward-link元素position:absolute, left:0, bottom:0

这应该可以解决问题。