blocks|key|1439882|text|你在列表2上有一个拼写错误(用-代替=)。如果您还将clear:right;添加到列表中，它应该会执行您想要的操作：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1439883|示例：http://jsfiddle.net/nkYun/|1439884|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/nkYun/^0|F|1|I|1|Q|C|0|3|Q|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@$9|Q|A|R|B|C]|$9|S|A|T|B|C]|$9|U|A|V|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|W|8|@]|D|@$9|X|A|Y|1|Z]]|E|$]]|$1|H|3|-4|5|6|7|10|8|@]|D|@]|E|$]]]|I|$J|$5|K|L|M|E|$N|O]]]]

You've got a typo on list 2 (<code>-</code> instead of <code>=</code>). If you also add <code>clear:right;</code> to the lists it should do what you want:

Example: <a href="http://jsfiddle.net/nkYun/" rel="nofollow">http://jsfiddle.net/nkYun/</a>

blocks|key|297410|text|.list-2+{
++++float:+right;
++++clear:+right;
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|297411|如果有足够的空间，float:+right将把这个元素放在任何其他向右浮动的元素的左边。要覆盖该行为并保证它将低于最新的float:right元素，您需要使用clear:right。|unstyled|offset|length|style|CODE|297412|entityMap^0|0|9|C|1O|B|27|B|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|N|8|@$G|O|H|P|I|J]|$G|Q|H|R|I|J]|$G|S|H|T|I|J]]|9|@]|A|$]]|$1|K|3|-4|5|F|7|U|8|@]|9|@]|A|$]]]|L|$]]

<pre><code>.list-2 {
 float: right;
 clear: right;
}
</code></pre>

<code>float: right</code> will, if there's enough room, put the element to the left of any other elements which have been floated to the right. To override that behaviour and guarantee that it will fall below the most recent <code>float:right</code> element you need to use <code>clear:right</code>.

blocks|key|296234|text|将这两个列表包装在单个div元素中，并将其向右浮动。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|296235|通过分别浮动这两个列表，您将使它们脱离文档的正常流程，因此它们不再强制元素显示在它们的下方。|296236|entityMap^0|B|3|0|0^^$0|@$1|2|3|4|5|6|7|J|8|@$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|M|8|@]|D|@]|E|$]]|$1|H|3|-4|5|6|7|N|8|@]|D|@]|E|$]]]|I|$]]

Wrap the two lists in a single <code>div</code> element and float that to the right instead.

By floating the two lists individually, you are taking them out of the normal flow of the document, so they no longer force elements to appear below them.

blocks|key|1228574|text|要将两个列表放在彼此的顶部，只需3个步骤：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1228575|2个列表的相对位置应该是position:relative|offset|length|style|CODE|1228576|One，容器的位置应该是浮动的，例如，向右移动第二个列表应该具有绝对位置position:absolute，并且它的右侧是0px，这样它就从右边开始，位于第一个列表|unordered-list-item|1228577|
上|1228578|entityMap^0|0|C|H|0|10|H|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@$D|Q|E|R|F|G]]|9|@]|A|$]]|$1|H|3|I|5|J|7|S|8|@$D|T|E|U|F|G]]|9|@]|A|$]]|$1|K|3|L|5|6|7|V|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|N|$]]

To float two lists on top of each other you simple need 3 steps:

<ol>
<li>The container should have position as relative <code>position:relative</code></li>
<li>One of the 2 lists should be float for example to the right <code>float:right</code></li>
<li>The second list should have position absolute <code>position:absolute</code> and the right of it is 0px so that it start from the right and be on the first list</li>
</ol>

blocks|key|297515|text|这是另一种方法。有时，试图弄清楚哪些应该向左浮动，哪些应该向右浮动，这在代码中可能会令人困惑。但是，如果您大概知道要浮动的元素是什么(也许稍后您会决定在该部分中添加更多元素)，那么将这些项包含在一个父容器中(在我们的例子中是一个div元素，其中包含一个名为lists的css类)，并将整个父项浮动到您想要的位置。这里有一个例子..。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|297516|CSS：|297517|.container+{
max-width:+1075px;
margin:+auto;
}
.container+img+{
float:+left;
}

.lists+{
++++float:+right;
++++border:solid+1px+pink;
}|code-block|syntax|javascript|297518|HTML：|297519|<div+class="container">

++++++++<img+src="yogapic1.png"/>

++++++++<div+class="lists">
++++++++<ul+class="list-1">
++++++++++++<li><a+href="">Home</a></li>
++++++++++++<li><a+href="">Influences</a></li>
++++++++++++<li><a+href="">About+Me</a></li>
++++++++++++<li><a+href="">Classes</a></li>
++++++++++++<li><a+href="">Andrews+Video+Blog</a></li>
++++++++++++<li><a+href="">Photography</a></li>
++++++++</ul>

++++++++<ul+class-"list-2">
++++++++++++<li><a+href="">Find+Us</a></li>
++++++++++++<li><a+href="">Contact</a></li>
++++++++++++<li><a+href="">Facebook</a></li>
++++++++</ul>
+++++++</div>


++++</div>|297520|和my+fiddle|offset|length|297521|还要注意，使用这种方法，您不再需要使用浮点数对列表进行排序，但是现在，在这个父容器中，您可以简单地进入HTML代码并按您希望的任何顺序对列表进行排序。|297522|享受吧！|297523|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/blackhawx/VUASq/3/^0|0|0|0|0|0|1|9|0|0|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|13|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|14|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|15|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|16|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|17|8|@]|9|@$O|18|P|19|1|1A]]|A|$]]|$1|Q|3|R|5|6|7|1B|8|@]|9|@]|A|$]]|$1|S|3|T|5|6|7|1C|8|@]|9|@]|A|$]]|$1|U|3|-4|5|6|7|1D|8|@]|9|@]|A|$]]]|V|$W|$5|X|Y|Z|A|$10|11]]]]

Here is an alternative approach. Sometimes trying to figure out what should be floated left, or what should be floated right can be confusing in code. But if you have a general idea of what elements you want to be floated, (and perhaps later on you will decide to add more to that section), then contain the items within a parent container (in our case a div element with a css class called lists) and float the entire parent where you want to be. Here's an example...

The CSS:

<pre><code>.container {
max-width: 1075px;
margin: auto;
}
.container img {
float: left;
}

.lists {
 float: right;
 border:solid 1px pink;
}
</code></pre>

The HTML:

<pre><code>&lt;div class="container"&gt;

 &lt;img src="yogapic1.png"/&gt;

 &lt;div class="lists"&gt;
 &lt;ul class="list-1"&gt;
 &lt;li&gt;&lt;a href=""&gt;Home&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href=""&gt;Influences&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href=""&gt;About Me&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href=""&gt;Classes&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href=""&gt;Andrews Video Blog&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href=""&gt;Photography&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;

 &lt;ul class-"list-2"&gt;
 &lt;li&gt;&lt;a href=""&gt;Find Us&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href=""&gt;Contact&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href=""&gt;Facebook&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;
 &lt;/div&gt;


 &lt;/div&gt;&lt;!--container--&gt;
</code></pre>

And <a href="http://jsfiddle.net/blackhawx/VUASq/3/" rel="nofollow">my fiddle</a>

Notice too with this approach, you are no longer leaving the headache of ordering your lists with floats, but now, within this parent container, you can simply go into your HTML code and sore the lists, in any order you want them to be. 

Enjoy!

blocks|key|3353748|text|如果你把list-2放在右边并清除:+right，这应该是可行的。像这样：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3353749|list-2+{
++++++float:+right;
++++++clear:+right;
}|code-block|syntax|javascript|3353750|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

If you float list-2 to the right and clear: right too that should work. Like:

<pre><code>list-2 {
 float: right;
 clear: right;
}
</code></pre>

blocks|key|3353927|text|尝试为您的列表分配宽度：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3353928|.list-1+{
++++float:+right;
++++width:100%25;
}
.list-2+{
++++float:+right;
++++width:100%25;
}|code-block|syntax|javascript|3353929|编辑|offset|length|style|BOLD|3353930|如果您为两个列表提供相同的CSS，请尝试如下所示|3353931|.container+ul{
++++float:left;
++++width:100%25;
}|3353932|entityMap^0|0|0|0|2|0|0|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|@$I|V|J|W|K|L]]|9|@]|A|$]]|$1|M|3|N|5|6|7|X|8|@]|9|@]|A|$]]|$1|O|3|P|5|D|7|Y|8|@]|9|@]|A|$E|F]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

Try to assign width to your list:

<pre><code>.list-1 {
 float: right;
 width:100%;
}
.list-2 {
 float: right;
 width:100%;
}
</code></pre>

Edit

If you are giving same CSS to both lists, try something like this 

<pre><code>.container ul{
 float:left;
 width:100%;
}
</code></pre>

Have an image floated to the left and two unordered lists floated to the right. For some reason the lists float side by side and not on top of each other. I can't get list-2 to float underneath float 1. 

Would anybody have any ideas?

<pre><code>&lt;div class="container"&gt;

 &lt;img src="yogapic1.png"/&gt;

 &lt;ul class="list-1"&gt;
 &lt;li&gt;&lt;a href=""&gt;Home&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href=""&gt;Influences&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href=""&gt;About Me&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href=""&gt;Classes&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href=""&gt;Andrews Video Blog&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href=""&gt;Photography&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;

 &lt;ul class-"list-2"&gt;
 &lt;li&gt;&lt;a href=""&gt;Find Us&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href=""&gt;Contact&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href=""&gt;Facebook&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;


 &lt;/div&gt;&lt;!--container--&gt;


.container {

max-width: 1075px;
margin: auto;

}

.container img {

float: left;

}

.list-1 {
 float: right;



 }

.list-2 {
 float: right;

}
</code></pre>

Floating two lists on top of each other?

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

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

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

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

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

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

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

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云AI代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

功能1上新10个字符

功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符。

功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符。

功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符

功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符

功能4上新

文章&问答评论现已支持表情

全新交互，全新视觉，新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能，全面提升创作效率和体验

社区富文本编辑器全新改版！诚邀体验～ 

精选全网热门MCP server，让你的AI更好用 🚀

💥开发者 MCP广场重磅上线！

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

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

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

向左浮动一个图像，向右浮动两个无序列表。由于某些原因，这些列表并排浮动，而不是彼此重叠。我不能让list-2浮在浮点数1的下面。有没有人有什么想法？<div class="container"> <img src="yogapic1.png"/> <ul class="list-1"> <li><a href="">Home</a></li>

问把两个列表放在一起？
EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问把两个列表放在一起？EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问把两个列表放在一起？
EN