gpt4 book ai didi

html - 改变元素的位置 - 响应式网站

转载 作者:太空宇宙 更新时间:2023-11-03 18:17:20 24 4
gpt4 key购买 nike

如何在较小的屏幕上将元素的位置从左侧更改为右侧?

这适用于更宽的屏幕:

.nav {
position:absolute;
top: 0px;
left: 5%;
}

我想将它定位为 right:10px 用于较小的屏幕。

谢谢。

============================================= ============

我做了一个 jsfiddle 链接:http://jsfiddle.net/romullus/5u64M/

============================================= ============

最佳答案

可以这样设置断点(假设600px是小屏和大屏的断点)

@media screen and (min-width: 601px) {
.nav {
position:absolute;
top: 0px;
left: 5%;
}
}



@media screen and (max-width: 600px) {
.nav {
position:absolute;
right:10px;

}
}

这是一个jsfiddle

更新 1

引用问题中提供的更新 fiddle ,上述逻辑的更新工作代码将是

    @media screen and (max-width: 600px) {
.social-nav {
position:absolute;
right: 10px;
}
.social-nav ul {
margin: 0;
padding:0;
}
.social-nav ul li {
list-style: none;
display:block;
background: #393939;
padding:10px 10px 5px 10px;
margin: 1px;
opacity: .5;
transition: all 0.6s ease-in-out;
}
.social-nav ul li:hover {
opacity: .8;
background:#fff;
}
}
@media screen and (min-width: 600px) {
.social-nav {
background:#000;
width:100%;
position:absolute;
top: 0px;
left: 5%;
}
.social-nav ul {
margin: 0;
padding:0;
}
.social-nav ul li {
list-style: none;
display:table-cell;
float: left;
background: #393939;
padding:100px 10px 5px 10px;
margin: 1px;
opacity: .5;
transition: all 0.6s ease-in-out;
}
.social-nav ul li:hover {
opacity: .8;
background:#fff;
}
.social-nav ul li a {
color:#fff;
}
}
}

Updated Fiddle

关于html - 改变元素的位置 - 响应式网站,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22540763/

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