如何更改此導航欄上的填充

我想更改填充，以便當屏幕變得太小時，鏈接不會進入2行，而是出現水平滾動。是否有可能使用CSS來做到這一點？我不想使用JavaScript如何更改此導航欄上的填充

<!DOCTYPE html> 
<html> 
<head> 
<style> 
.top_menu { 
    position:fixed; 
    background: #F5F5F5; 
    width:100%; 
    top:0; 
    left:0; 
    height:20px;  /* decide on this at some stage */ 
    padding: 0; 
} 

.menu { 
    font-family: Verdana, Arial; 
    position:fixed; 
    background: transparent; 
    width:100%; 
    top:75px; 
    left:0; 
    height:25px;  /* decide on this at some stage */ 
    padding: 0; 
    text-align:center; 
    font-size: 12px; 
    font-weight: 600; /* decide on this at some stage */ 
    border-bottom: 1px solid #ccc; /* decide on this at some stage */ 
    border-top: 1px solid #ccc; /* decide on this at some stage */ 
} 

.ty-menu__items { 
    position: absolute; 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    width:100%; 
    text-align: center; 
} 

.ty-menu__item { 
    display: inline-block; 
    padding-right: 2%; 
    padding-left: 2%; 
    } 

a:link, a:visited { 
    display: block; 
    width: 100%; 
    font-weight: light; 
    color: #494949; 
    background: transparent; 
    text-align: center; 
    text-decoration: none; 
    text-transform: uppercase; 
    padding: 5px 0px; 
} 

a:hover, a:active { 
    padding-bottom:2px; /* decide on this at some stage */ 
    background: transparent; 
    border-bottom: 3px solid #9B9B9B; /* decide on this at some stage */ 
    color: #9B9B9B; /* decide on this at some stage */ 
} 
</style> 
</head> 
<body> 
<div class="top_menu"></div> 
<div class="menu"> 
<ul class="ty-menu__items"> 
    <li class="ty-menu__item"><a href="#home">new in</a></li> 
    <li class="ty-menu__item"><a href="#news">homeware</a></li> 
    <li class="ty-menu__item"><a href="#contact">decorating</a></li> 
    <li class="ty-menu__item"><a href="#about">diy</a></li> 
    <li class="ty-menu__item"><a href="#about">furniture</a></li> 
    <li class="ty-menu__item"><a href="#about">bathroom</a></li> 
    <li class="ty-menu__item"><a href="#about">garden</a></li> 
    <li class="ty-menu__item"><a href="#about">offers</a></li> 
</ul> 
</div> 
</body> 

</html>

來源

2015-07-20 Grant9196

檢查如何使用媒體querys – Medda86

^同意@some寬度'溢出-X：滾動;':) –

媒體查詢是否有用。嘗試添加到您的CSS的底部。

@media (max-width: 800px) { 
    .menu { 
     width: 100%; 
     height: 40px; 
     overflow: scroll; 
    } 
    .ty-menu__items { 
     width: 800px; 
    } 
}

小提琴：http://jsfiddle.net/6wrjnbj7/

來源

2015-07-20 22:35:19

謝謝。有沒有辦法只得到x溢出產生滾動？我試過，但沒有產生滾動：http://jsfiddle.net/6wrjnbj7/1/ – Grant9196

它是'overflow-x'，而不是'x-overflow'。你會想保持高度超過25px。 http://jsfiddle.net/6wrjnbj7/2/ –

如果我希望滾動顯示在頁面底部，就像它在本網站上一樣？然後我需要創建一個div來包裝頁面上的所有內容嗎？ – Grant9196

可以在CSS的overflow屬性設置爲scroll，這應該工作給你固定高度爲20px。

由於Medda86表示CSS中的媒體查詢將允許您在特定的斷點（寬度）進行響應css，請參閱google guide。

來源

2015-07-20 22:29:22 Mousey

真棒。謝謝:) – Grant9196

如何更改此導航欄上的填充

回答

相關問題