html – 水平的ul导航对齐到右侧

发布时间：2020-12-14 18:52:28 所属栏目：资源来源：网络整理

导读：我正在尝试创建一个与父元素右侧对齐的水平导航.您可以在 http://kaffeeprinzen.jag-aelskar.de/的“Espresso”中看到导航. 我的HTML是： ul id="menu-standard" li id="menu-item"aItem 4/a/li li id="menu-item"aItem 3/a/li li id="menu-item"aItem 2/a/l

我正在尝试创建一个与父元素右侧对齐的水平导航.您可以在 http://kaffeeprinzen.jag-aelskar.de/的“Espresso”中看到导航.

我的HTML是：

<ul id="menu-standard">
    <li id="menu-item"><a>Item 4</a></li>
    <li id="menu-item"><a>Item 3</a></li>
    <li id="menu-item"><a>Item 2</a></li>
    <li id="menu-item"><a>Item 1</a></li>
</ul>

我的CSS是：

.menu li { 
    float: right;
    margin-left: 20px;
}

这样做是唯一的问题是列表中的顺序是错误的.第一个项目是html代码中的最后一个.

任何提示给我？非常感谢！
雅尼斯

解决方法

尝试漂浮ul,而不是每个li.每个li可以向左浮动.

#menu-standard { 
    float: right;
}

#menu-standard li { 
    float: left;
}

示例：http://jsfiddle.net/hunter/HsUTQ/

float：right将浮动物品,按顺序排列到右边.意思是第一个元素将是最右边的,然后是第二个元素,下一个最右边的等等.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!