編輯佈局以在元素之間使用垂直規則。

在我設計的形象，這就是我要爲： 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>

來源

2014-02-07 James Anderson

有很多的，你可以做到這一點的方式，而是一個超級簡單的解決方案只是將一個包裝div來你的「目錄」部分，並添加邊框以唯一留下的，具有足夠的填充，以把它你想要它的地方。

還在兩者之間粘貼1px寬的塊元素，並給出邊框很容易和可調整。這兩個都很好，因爲它們會隨着元素移動和縮放，而不需要添加一些可怕的絕對定位邏輯。

來源

2014-02-07 18:59:37 UpQuark

試試這個：

---------- 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>

來源

2014-02-07 19:05:55 RealDeepak

編輯佈局以在元素之間使用垂直規則。

回答

相關問題