Question

我有以下简化的测试用例：

在我的设计图片中，这就是我想要的： http://i.imgur.com/BzsW6YJ.jpg

在页脚中，您可以看到我在电子邮件交易和电子邮件之间添加了一条横向规则。目录部分。但是，我不知道如何通过代码实现这一目标。

我的HTML在下面。在JSFiddle中，我使用了大量的外部CSS和JS。

<section id="newslettersignup">
    <div class="container White_BG">
        <div class="pull-left newsletter">
            <h2>E-mail Deals</h2>
            Sign up to receive Sales &amp; exclusive news!<br>
            We will not sell or rent your email address. <a href=" //rsatestamle.dminsite.com/privacy-policy/a/3/" style="text-decoration:underline;color:#F25C27;">Privacy Policy</a>.<br><br>
            <form class="form-horizontal" method="post" action="http://www.gliq.com/cgi-bin/subunsub">
                <div class="input-prepend">
                    <input type="hidden" name="acctname" value="amleo">
                    <input type="hidden" name="action" value="subscribe">
                    <input type="hidden" name="url" value=" //rsatestamle.dminsite.com/subscribe-successful/a/47/">
                    <input type="text" placeholder="Your email address" id="inputIcon" class="input-xlarge" name="email">
                    <input value="SUBSCRIBE" class="btn btn-orange" type="submit">
                </div>
            </form>
        </div>
        <div id="Catalog" class="pull-right catrr">
            <div class="catalog">
                    <h2>Catalogs</h2>
                    <a href=" //rsatestamle.dminsite.com/catalogs.aspx" title="Catalogs" style="text-decoration:underline;"><font color="#F25C27">View our online catalog</font></a>, or <br><br><a class="various" data-fancybox-type="iframe" href="catalogrequestpopup.aspx?catalog_id=0001&amp;name=2014 Catalog Request" title="Request a Catalog" style="text-decoration:underline;">
                    <font color="#F25C27">request a free catalog now!</font></a><br>
            </div>
        </div>
    </div>
</section>

Answer 1

试试这个：

 ---------- CSS -----------
// remove or update container width. Its now width: 730px should be .

.container {
    /* width:724px; */
}

#newslettersignup .newsletter {
    min-width: 414px;
    border-right: 1px solid #DADADA;
}


-------------HTML --------------
//Remove class catrr from div
<div class="pull-right catrr" id="Catalog">
.......           
</div>

Answer 2

有很多方法可以做到这一点，但一个超级简单的解决方案就是在你的“目录”部分添加一个包装div，只在左边添加一个边框，并有足够的填充将它放在你想要的地方

还在两者之间粘贴一个1px宽的块元素并赋予边框简单且可调整。这两个都很好，因为它们将随元素移动和缩放，而不需要添加一些可怕的绝对定位逻辑。

编辑布局以在元素之间使用垂直规则。

2 个答案: