改变命令 - 逆转命令

Question

我有一个"li",从1到5的5个元素顺序.我将它们设置在一个固定的div内作为内联块.当我运行代码时,列表顺序从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>

我的意思是第一个项目位于最左侧的区域(我希望他位于最右侧的区域),最后一个项目位于最左边的区域(我希望他位于最左边的区域) .该项目应该用希伯来语写,所以我必须保持正确的顺序.有谁知道如何解决这个问题而不改变html列表中的顺序？

TNX!

Answer 1

您可以使用列表上的direction:rtl; direction属性,例如:

#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>