更改元素响应网站的位置 [英] Change position of an element - responsive website

问题描述

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

How can i change the position of an element from being left to being right in a smaller screen?

这适用于更宽的屏幕：

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

我想把它正确定位：10px用于较小的屏幕。

and i would like to position it right:10px for the smaller screen.

谢谢。

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

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

我制作了一个jsfiddle链接： http://jsfiddle.net/romullus/5u64M/

I made a jsfiddle link: http://jsfiddle.net/romullus/5u64M/

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

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

推荐答案

您可以这样设置断点（假设600 px是小屏幕和大屏幕之间的断点）

You can set the break points this way(assuming 600 px is the breakpoint between small screen and large screen)

@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

在参考问题中提供的更新小提琴时，上述逻辑上的新工作代码将

In reference to the updated fiddle provided in the question the newer working code on the above logic will be

    @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;
        }
    }
}

更新小提琴

这篇关于更改元素响应网站的位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！