html - 更改 li 顺序 - 颠倒顺序

标签 html css

<分区>

我有一个从 1 到 5 的 5 个元素顺序的“li”。我将它们设置在一个固定的 div 中作为内联 block 。当我运行代码时,列表顺序从 5 到 1 而不是 1-5。

代码:

    #nav_bar{
	border: 2px solid black;
	background-color: white;
	height: 40px;
	position: fixed;
	width: 100%;
	top: 0;
	left: -2px;}

    ul{
	padding: 0px;
	text-align: center;
    }
    li {
	display: inline-block;
	padding: 0 10px;	
	color: gray;
	width: 100px;
	float: inherit;
    }
	<div id="header">
		<div id="nav_bar">
			<ul>
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
				<li>5</li>
			</ul>
		</div>
	</div>

我的意思是第一个item位于最左边的block(而且我希望他在最右边的block),最后一个item位于最左边的black(我希望他在最右边的block)左 block )。该元素应该用希伯来语书写,所以我必须保持正确的顺序。有人知道如何在不更改 html 列表中的顺序的情况下解决这个问题吗?

谢谢!

最佳答案

您可以使用direction:rtl; direction property在列表中,如:

#nav_bar {
    border: 2px solid black;
    background-color: white;
    height: 40px;
    position: fixed;
    width: 100%;
    top: 0;
    left: -2px;
}
ul {
    padding: 0px;
    text-align: center;
    direction:rtl;
}
li {
    display: inline-block;
    padding: 0 10px;
    color: gray;
    width: 100px;
    float: inherit;
}
<div id="header">
    <div id="nav_bar">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </div>
</div>

关于html - 更改 li 顺序 - 颠倒顺序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27843459/

相关文章:

html - MP4 视频无法在移动设备和 Chrome 上播放?

jquery - 网格中心的一个 ui block - jquery mobile

javascript - 需要制作一个 Twitter 分享按钮来分享来自 JS 函数的随机引用

ios - 在不使用 <embed> 标签的情况下使用 <html> 在 iOS 浏览器中显示 <svg>

javascript - 如何配置 mailto 到 rtl?

css - 如何让 -moz-binding 为带有数据 :text/xml? 的省略号工作

html - "navbar-header"类在 Bootstrap 中做什么?

html - CSS 圆圈在 ios 上看起来是椭圆形的

javascript - .slideDown() 下面的内容跳转(不流畅)

php - 使用数组将 css 类分配给 tagcloud