Question

我想更改填充，所以当屏幕变得太小时，链接不会转到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>

Answer 1

媒体查询可以解决问题。尝试将其添加到CSS的底部。

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

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

Answer 2

您可以在CSS中将overflow属性设置为#include <stdio.h> void change(void *p) { *((char*)p) += 2; } int main (void) { int a = 4; void *ap = (void*) &a; *((char*)(ap)) = 0; change(ap); a += 1; printf("%d\n", a); return 0; }，这应该可以让您将高度固定为20px。

正如Medda86所说，CSS中的媒体查询将允许您在某些断点（宽度）处制作响应式CSS，请参阅google guide。

如何更改此导航栏上的填充

2 个答案: