定位嵌套的Div只有水平滾動

Question

我需要在我的示例中提供HERE只有水平滾動。

現在我知道這裏有類似問題的帖子，其答案與在CSS中使用{overflow-x:auto; and overflow-y:hidden;}一樣簡單。我試過了，出於某種原因，我沒有得到我期待的結果。我想要的只是水平滾動。我需要這樣做，以便在HTML文件中添加更多功能和鏈接時，它不會像我在jsfiddle中那樣下拉。我的整個代碼如下所示：

CSS：

body { 
    font-family: "marcellus sc"; 
} 

body p{ 
    font-family: "trebuchet ms"; 
    letter-spacing: 2px; 
} 

.links_wrapper { 
    background-color: rgba(246,217,90,0.7); 
    border:3px solid #c5a101; 
    border-radius: 8px; 
    height: 398px; 
    width:95%; 
    margin:auto; 
    text-align: center; 
    position: relative; 
    padding: 5px; 
} 

.links_title { 
    height: 40px; 
    width:98%; 
    margin-left: auto; 
    margin-right: auto; 
    float: left; 
    text-align: left; 
    font-size: 25px; 
    letter-spacing: 4px; 
    font-weight: 100; 
    text-shadow: 2px 2px 2px #666; 
} 

.scroll { 
    overflow-x: auto; 
    overflow-y: auto; 
    height: 358px; 
    width:98%; 
    margin-left: auto; 
    margin-right: auto; 
    margin-top: auto; 
    margin-bottom: auto; 
} 

.ind_blocks { 
    margin: 0; 
    box-sizing: border-box; 
    height: 348px; 
    width: 100%; 
    overflow-x: auto; 
    overflow-y: auto; 
    float: left; 
    background-color: rgba(248,217,10,0.4); 
    padding: 5px; 
} 

.ind_blocks div { 
    padding: 5px; 
    box-sizing: border-box; 
    height: 100%; 
    width:20%; 
    float: left; 
    background-color: rgba(90,90,90,0.7); 
    border: 2px solid #c5a101; 
    border-radius: 8px; 
} 

.ind_blocks div:hover { 
    background-color: rgba(10,10,10,0.5); 
    color: #ffd000; 
} 

.ind_blocks div #under_constr { 
    padding-bottom: 10px; 
    box-sizing: padding-box; 
    width: 100%; 
    height: 100px; 
    display:none; 
    top:100px; 
    position: relative; 
    margin-left: auto; 
    margin-right: auto; 
    text-align: center; 
    margin-bottom: auto; 
    margin-top: auto; 
    z-index: 10; 
} 

.ind_blocks div:hover > #under_constr { 
    display: block; 
    color: #fff; 
} 

div .img_n_text { 
    position: relative; 
    height: 100%; 
    width: 100%; 
    background-color: rgba(99,199,249,0.5); 
    text-align: center; 
} 

div .img_n_text img { 
    width: 97%; 
    box-sizing: border-box; 
    margin-left: auto; 
    margin-right: auto; 
} 

div .img_n_text h4 { 
    margin: 0; 
    padding: 2px; 
} 

div .img_n_text p { 
    margin-left: auto; 
    margin-right: auto; 
    font-size: 16px; 
    font-weight: 200; 
} 

HTML：

<div class="links_wrapper"> 
    <div class="links_title">Head Menu:</div> 
    <div class="scroll"> 

    <div class="ind_blocks"> 
     <a style="text-decoration:none; " href="" > 
     <div> 
      <div id="under_constr"> 
      <p>Under Construction</p> 
      </div> 
      <div class="img_n_text"> 
      <img src="img/blubox149x121.jpg" /> 
      <h4>Head1</h4> 
      <p>Aut fabulas do probant.</p> 
      </div> 
     </div> 
     </a> 

     <a style="text-decoration:none; " href="" > 
     <div> 
      <div id="under_constr"> 
      <p>Under Construction</p> 
      </div> 
      <div class="img_n_text"> 
      <img src="img/blubox149x121.jpg" /> 
      <h4>head2</h4> 
      <p>Id esse consequat arbitror.</p> 
      </div> 
     </div> 
     </a> 

     <a style="text-decoration:none; " href="" > 
     <div> 
      <div id="under_constr"> 
      <p>Under Construction</p> 
      </div> 
      <div class="img_n_text"> 
      <img src="img/blubox149x121.jpg.jpg" /> 
      <h4>head3</h4> 
      <p>Se tamen cohaerescant.</p> 
      </div> 
     </div> 
     </a> 

     <a style="text-decoration:none; " href="" > 
     <div> 
      <div id="under_constr"> 
      <p>Under Construction</p> 
      </div> 
      <div class="img_n_text"> 
      <img src="img/blubox149x121.jpg.jpg" /> 
      <h4>head4</h4> 
      <p>Anim voluptate de labore fore.</p> 
      </div> 
     </div> 
     </a> 

     <a style="text-decoration:none; " href="" > 
     <div> 
      <!--<div id="under_constr"> 
      <p>Under Construction</p> 
      </div>--> 
      <div class="img_n_text"> 
      <img src="img/blubox149x121.jpg.jpg" /> 
      <h4>Links</h4> 
      <p>Hic offendit ex admodum.</p> 
      </div> 
     </div> 
     </a> 

     <a style="text-decoration:none; " href="" > 
     <div> 
      <div id="under_constr"> 
      <p>Under Construction</p> 
      </div> 
      <div class="img_n_text"> 
      <img src="img/blubox149x121.jpg.jpg" /> 
      <h4>Sixth Link</h4> 
      <p>If more features gets added...</p> 
      </div> 
     </div> 
     </a> 

    </div> 

    </div> 

</div> 

我試圖解決這個主要與CSS和使用JavaScript只能作爲最後的手段。
我在做什麼錯？或者我錯過了什麼？

更新：我附上我應用RCNeil的回答後得到的結果截圖， Here。它仍然沒有做我想做的事。我目前正在通過其他答案查看哪一個符合我的需要。我會盡快更新。我很抱歉我的代碼混亂而且效率低下。我仍然在學習這些細節，還有什麼比學習更好的方法，對嗎？再次感謝您的幫助。

Answer 1

這是您嘗試完成的效果的「最簡單情況」示例。請注意，這裏只有一個div，水平放置並在x軸上滾動的子項。

主要技巧是white-space：nowrap;在你想滾動的div上，並確保你重置空格：normal;在它的孩子，所以文字包裝如你所料。

小提琴：http://jsfiddle.net/n67Gk/

HTML：

<div class="scroll"> 
    <a href="#"> 
     This scrolls 
    </a> 
    <a href="#"> 
     This scrolls 
    </a> 
    <a href="#"> 
     This scrolls 
    </a> 
    <a href="#"> 
     This scrolls 
    </a> 
    <a href="#"> 
     This scrolls 
    </a> 
    <a href="#"> 
     This scrolls 
    </a> 
     <a href="#"> 
     This scrolls 
    </a> 
    <a href="#"> 
     This scrolls 
    </a> 

</div> 

CSS：

body{ 
    margin:0; 
} 
body, html{ 
    width:100%; 
    height:100%; 
} 

.scroll{ 
    width:100%; 
    height:398px; 
    overflow-x:auto; 
    white-space:nowrap; 
} 

.scroll a{ 
    display:inline-block; 
    vertical-align:top; 
    height:100%; 
    width:100px; 
    background:#369; 
    border-radius:5px; 
}