更改 li 顺序 - 颠倒顺序 [重复]答案

【问题标题】：change li order - reverse the order [duplicate]更改 li 顺序 - 颠倒顺序 [重复]
【发布时间】：2015-03-03 03:20:09
【问题描述】：

我有一个从 1 到 5 的 5 个元素顺序的“li”。我将它们设置在一个固定的 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！

【问题讨论】：

标签： html css

【解决方案1】：

您可以使用列表中的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>

【讨论】：

【解决方案2】：

Direction

允许你这样做，使用这个direction:rtl;

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

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

【讨论】：

【解决方案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>

【讨论】：

【解决方案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());
});

这应该很好用

【讨论】：