blocks|key|126721|text|您应该只向右浮动ul。列表项应按正确(预期)顺序左移：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|126722|.header+ul+{
++++float:right;
}

//+expected+order.+It's+the+default+value+if+not+overriden,
//+therefore+it+is+not+realy+needed
.header+li
{
++++float:left;
}|code-block|syntax|javascript|126723|entityMap^0|8|2|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

You should float only the <code>ul</code> right. The list items should be floated left in the correct (expected) order:

<pre><code>.header ul {
 float:right;
}

// expected order. It's the default value if not overriden,
// therefore it is not realy needed
.header li
{
 float:left;
}
</code></pre>

blocks|key|126762|text|不要选择浮动右，取其为左，然后您将得到结果家庭旅游定价常见问题。|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|126763|要理解它，让我们看看：|126764|在这里，您正在尝试打印家庭旅游定价FAQ，如果您将这个值浮动到右边，这意味着您要从右边打印，这就是为什么它给您的输出作为FAQ定价旅游主页，这就是为什么我们使用float:+left;。|CODE|126765|.header+ul

{


}
.header+li
{
++++list-style-type:+none;
++++margin-left:+40px;
++++float:+left;

}

+<div+class="header">
+++++++++<ul>
++++++++++++<li><a++href="">HOME</a></li>
++++++++++++++++<li><a+href="">TOUR</a></li>
+++++++++++++++++<li><a++href="">PRICING</a></li>
++++++++++++++++<li><a++href="">FAQ</a></li>

++++++++++++</ul>
++</div>|code-block|syntax|javascript|126766|演示|126767|entityMap|0|LINK|mutability|MUTABLE|url|http://jsbin.com/yiduzece/1/edit?html,css,output^0|L|A|0|0|B|9|1O|9|28|C|0|0|0|2|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@$9|10|A|11|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|12|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|13|8|@$9|14|A|15|B|C]|$9|16|A|17|B|C]|$9|18|A|19|B|J]]|D|@]|E|$]]|$1|K|3|L|5|M|7|1A|8|@]|D|@]|E|$N|O]]|$1|P|3|Q|5|6|7|1B|8|@]|D|@$9|1C|A|1D|1|1E]]|E|$]]|$1|R|3|-4|5|6|7|1F|8|@]|D|@]|E|$]]]|S|$T|$5|U|V|W|E|$X|Y]]]]

Instead of taking float right take it as left then you will get the result HOME TOUR PRICING FAQ

To understand it let us see :

Here you are trying to print HOME TOUR PRICING FAQ and if you will float this to the right it means you are telling to print from right and that's why it gives you the output as 
FAQ PRICING TOUR HOME so that's why we use <code>float: left;</code>

<pre><code>.header ul

{


}
.header li
{
 list-style-type: none;
 margin-left: 40px;
 float: left;

}

 &lt;div class="header"&gt;
 &lt;ul&gt;
 &lt;li&gt;&lt;a href=""&gt;HOME&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href=""&gt;TOUR&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href=""&gt;PRICING&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href=""&gt;FAQ&lt;/a&gt;&lt;/li&gt;

 &lt;/ul&gt;
 &lt;/div&gt;
</code></pre>

<h2><a href="http://jsbin.com/yiduzece/1/edit?html,css,output" rel="nofollow">DEMO</a></h2>

blocks|key|2730589|text|这是因为您在浮动每个list元素right。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2730590|相反，在父元素上设置float:+right。|2730591|.header+ul+{
++float:+right;
}|code-block|syntax|javascript|2730592|还有其他各种解决方案，请看这里|2730593|这是一个演示|2730594|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/4224476/span-float-reverse-order|1|http://jsfiddle.net/Mrcqr/2/^0|G|5|0|A|C|0|0|B|4|0|0|0|6|1|0^^$0|@$1|2|3|4|5|6|7|10|8|@$9|11|A|12|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|13|8|@$9|14|A|15|B|C]]|D|@]|E|$]]|$1|H|3|I|5|J|7|16|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|17|8|@]|D|@$9|18|A|19|1|1A]]|E|$]]|$1|O|3|P|5|6|7|1B|8|@]|D|@$9|1C|A|1D|1|1E]]|E|$]]|$1|Q|3|-4|5|6|7|1F|8|@]|D|@]|E|$]]]|R|$S|$5|T|U|V|E|$W|X]]|Y|$5|T|U|V|E|$W|Z]]]]

It's because you're floating each list element <code>right</code>.
Set <code>float: right</code> on the parent element instead.
<pre><code>.header ul {
 float: right;
}
</code></pre>
There are various other solutions, <a href="https://stackoverflow.com/questions/4224476/span-float-reverse-order">see here</a>
<h3><a href="http://jsfiddle.net/Mrcqr/2/" rel="nofollow noreferrer">Here's a demo</a></h3>

blocks|key|126804|text|原因似乎是浮点元素。当您给出float:right时，它会将第一个元素放在最右边，然后再取其余的项。但是，如果您给出了float:left，这些项目似乎按照正确的顺序排列，将第一项定位在左边，其余的项目则放在那之后。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|126805|entityMap^0|E|B|1N|A|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|M|8|@]|D|@]|E|$]]]|G|$]]

The reasons seems to be the float element. When you give <code>float:right</code>, it takes the first element to the right most side and rest of the items after that. However if you give <code>float:left</code>, the items seems to come in correct order with positioning the first item in the left and rest of the items after that.

blocks|key|2730629|text|试试像这样的东西|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2730630|++++.header+ul+{
++++++++float:+right;
++++}
++++.header+li+{
++++++++list-style-type:+none;
++++++++margin-left:+40px;
++++++++float:+left;
++++}|code-block|syntax|javascript|2730631|原因|2730632|您正在将li元素浮动到right，因此将其float为left。|offset|length|style|CODE|2730633|将li父元素(+ul+)浮动到left。|2730634|entityMap^0|0|0|0|4|2|B|5|L|5|R|4|0|1|2|8|2|F|4|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|V|8|@$K|W|L|X|M|N]|$K|Y|L|Z|M|N]|$K|10|L|11|M|N]|$K|12|L|13|M|N]]|9|@]|A|$]]|$1|O|3|P|5|6|7|14|8|@$K|15|L|16|M|N]|$K|17|L|18|M|N]|$K|19|L|1A|M|N]]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|1B|8|@]|9|@]|A|$]]]|R|$]]

try something like this

<pre><code> .header ul {
 float: right;
 }
 .header li {
 list-style-type: none;
 margin-left: 40px;
 float: left;
 }
</code></pre>

Reason 

you are floating <code>li</code> element to <code>right</code> so instead <code>float</code> it to <code>left</code>.

float <code>li</code> parent element ie <code>ul</code> to <code>left</code>.

I have created a menu using <code>ul</code> and <code>li</code>, but it shows me in reverse order. For example:

FAQ PRICING TOUR HOME instead of the expected HOME TOUR PRICING FAQ 

<pre><code>.header ul {

}
.header li {
 list-style-type: none;
 margin-left: 40px;
 float: right;
}

&lt;div class="header"&gt;
 &lt;ul&gt;
 &lt;li&gt;&lt;a href=""&gt;HOME&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href=""&gt;TOUR&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href=""&gt;PRICING&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href=""&gt;FAQ&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;
&lt;/div&gt;
</code></pre>

What's wrong in my code?

Why menu created with ul li elements displayed in reverse order?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我使用ul和li创建了一个菜单，但它以相反的顺序显示了我。例如：FAQ定价旅游家庭而不是预期的家庭旅游定价FAQ.header ul {}.header li { list-style-type: none; margin-left: 40px; float: right;}<div class="header"> <ul> <li><a href="">HOME</a>

问为什么用ul li元素创建的菜单以反向顺序显示？
EN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么用ul li元素创建的菜单以反向顺序显示？EN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么用ul li元素创建的菜单以反向顺序显示？
EN