Question

我的响应式网站上有一个菜单栏。目前它在我想要在100px的游行中向左显示的网页右侧对齐，它应该也是响应但是我我不能这样做..

这是HTML ..

       <nav id="nav">
            <ul>
                <li><a href="#intro">Intro</a></li>
                <li><a href="#one">What I Do</a></li>
                <li><a href="#two">Who I Am</a></li>
                <li><a href="#work">My Work</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav

这里是css ..

#nav {
    position: absolute;
    right: 0.5em;
    top: 0;
    height: 3em;
    line-height: 3em;
}

    #nav ul {
        margin: 0;
    }

        #nav ul li {
            display: inline-block;
            margin-left: 0.5em;
            font-size: 0.9em;
        }

            #nav ul li a {
                display: block;
                color: inherit;
                text-decoration: none;
                height: 3em;
                line-height: 3em;
                padding: 0 0.5em 0 0.5em;
                outline: 0;
            }

这里是小提琴演示..请帮帮我... Fiddle

Answer 1

你的问题很难模糊地回答。

首先关闭。你说你希望菜单对齐左边而不是右边。距离左侧100像素的边缘。您需要做的只是改变您的代码：

#nav {
    position: absolute;
    right: 0.5em;
    top: 0;
    height: 3em;
    line-height: 3em;
}

分为：

#nav {
    position: absolute;
    left: 100px;
    top: 0;
    height: 3em;
    line-height: 3em;
}

这会将元素设置在距离页面左下角100px的绝对位置，而不是像之前在标记中那样从右边开始。

关于它的响应部分将需要更多的CSS工作。有几种方法可以做到这一点。您可以将其设置为自动宽度。这将根据元素和页面调整宽度。或者，您可以使用CSS媒体屏幕告诉浏览器在浏览器宽度小于或高于某个像素集时如何渲染元素。

希望这能帮助你朝着正确的方向前进

Answer 2

Js Fiddle

#nav {
    position: absolute;
    left: 0.5em; /** changed from right to left **/
    top: 0;
    height: 3em;
    line-height: 3em;
}

    #nav ul {
        margin: 0;
        padding:0; /** removed default padding ***/
    }

Answer 3

我同意@Vitorino Fernandes，但我建议避免使用导航元素上的position: absolute。 position: absolute有效地从绘制流中移除元素，并可能导致与其他内容重叠的问题。如果您想让导航卡在窗口顶部，请使用position: fixed，否则，向左浮动导航并删除默认的填充和边距应该可以获得您正在寻找的效果。

#nav {
    height: 3em;
    float: left;
}

#nav ul {
    margin: 0;
    padding: 0;
}

#nav > ul > li {
    display: inline-block;
    margin-right: 0.5em;
    font-size: 0.9em;
}

#nav > ul > li > a {
    display: block;
    color: inherit;
    text-decoration: none;
    height: 3em;
    line-height: 3em;
    padding-right: 1em;
    outline: 0;
}

我在这里分叉并修改了你的小提琴：http://jsfiddle.net/autoboxer/5nLebzoe/

干杯， autoboxer

如何显示我的菜单栏链接到左侧

3 个答案: