gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-03 23:13:49 25 4
gpt4 key购买 nike

我想更改内边距,这样当屏幕变得太小时,链接就不会变成 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>

最佳答案

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

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

fiddle :http://jsfiddle.net/6wrjnbj7/

关于html - 如何更改此导航栏上的填充,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31527298/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com