改变命令 - 逆转命令

Question

我有一个＆＃34; li＆＃34; 5个元素顺序从1到5.我将它们设置在一个固定的div内作为内联块。当我运行代码时，列表顺序从5到1而不是1-5。

代码：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

TNX！

Answer 1

您可以使用列表中的direction:rtl; direction property，例如：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

Direction

允许您使用此direction:rtl;

＆＃13;

＆＃13;

#nav_bar {
  border: 2px solid black;
  background-color: white;
  height: 40px;
  position: fixed;
  width: 100%;
  top: 0;
  left: -2px;
  direction:rtl;
}
ul {
  padding: 0px;
  text-align: center;
}
li {
  display: inline-block;
  padding: 0 10px;
  color: gray;
  width: 100px;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

---

Answer 3

替代解决方案：

    #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 dir="RTL">
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
				<li>5</li>
			</ul>
		</div>
	</div>

Answer 4

如果你考虑使用javascript和jQuery，那么就有一个解决方案，如下所示：http://www.jquerybyexample.net/2012/12/jquery-reverse-order-of-ordered-list-child-elements.html

$(document).ready(function() {
    var list = $('ul');
    var listItems = list.children('li');
    list.append(listItems.get().reverse());
});

这应该可以很好地运作