所以我想要占用相同空间的两个（或可能更多）元素。它们需要放在容器元素内部，容器元素的大小应该自动大到足以容纳它们。我目前有几种可能不起作用的可能性，如下所示：
.first {
display: inline-block;
position: relative;
border: 1px solid black;
padding: 1px;
}
.first > li {
display: block;
padding: 0px;
margin: 0px;
position: relative;
}
.second {
display: inline-block;
position: relative;
border: 1px solid black;
padding: 1px;
}
.second > li {
display: block;
padding: 0px;
margin: 0px;
position: absolute;
}
.third {
display: inline-block;
border: 1px solid black;
padding: 1px;
}
.third > li {
padding: 0px;
margin: 0px;
float: left;
margin-right: -100%;
}<div style="float:right; width: 75%">(Attempt 1: note that the two items are not superimposed, but the container is large enough to hold them)</div>
<ul class="first">
<li>Item number 1</li>
<li>Item number 2</li>
</ul>
<br><br>
<div style="float:right; width: 75%">(Attempt 2: note that this time they are superimposed, but no space is allocated in the container for them)</div>
<ul class="second">
<li>Item number 1</li>
<li>Item number 2</li>
</ul>
<br><br><br><br>
Edited to add a third attempt:<br>
<ul class="third">
<li>Item number 1</li>
<li>Item number 2</li>
</ul>
理想情况下，我正在寻找纯CSS解决方案，但它只需要在基于webkit的浏览器（即chrome / safari）上工作。
更新：添加第三次尝试，让两个项目重叠，但是分配足够的空间来并排放置它们，这仍然无法让我到达我想要的位置。
供参考：我不提前知道物品的大小，因此不能（例如）将容器的大小设置为最大，并使其余部分重叠。
答案 0 :(得分：1)
ul {
display: inline-block;
position: relative;
border: 1px solid black;
padding:0; margin:0;
}
ul li {
display: block;
position: absolute;
top:0; left:0;
}
ul li:nth-child(1) {
position:relative;
}<ul>
<li>Item number 1</li>
<li>Item number 2</li>
</ul>
答案 1 :(得分：0)
absolute positioning：在所有position: absolute元素上设置<li>，然后在position: relative上设置.current（有多种方法可以选择显性<li>并使用课程只是其中之一）<li>给出了我认为你追求的东西。
然后，我们可以将每个<li>的{{3}}设置为hidden，并将visibility的{{1}}设置为.current以减少视觉混乱：
visibleul {
display: inline-block;
padding: .2em .3em;
list-style: none;
border: 2px solid black;
}
li {
position: absolute;
visibility: hidden;
}
li.current {
position: relative;
visibility: visible;
}
此方法与使用<ul>
<li>a</li>
<li>abc</li>
<li>abcdefg</li>
<li>foo bar baz</li>
<li>i dunno lol</li>
<li class="current">42</li>
</ul> display和none实际上相同：
list-itemul {
display: inline-block;
padding: .2em .3em;
list-style: none;
border: 2px solid black;
}
li {
display: none;
}
li.current {
display: list-item;
}
将每个<ul>
<li>a</li>
<li>abc</li>
<li>abcdefg</li>
<li>foo bar baz</li>
<li>i dunno lol</li>
<li class="current">42</li>
</ul>的{{1}}设置为visibility，然后仅将height 0 <li>重新推送{{1} } {＆＃39; s initial，我们得到这样的结果：
.currentheight
虽然这个问题需要一个CSS解决方案，但这可能是不可能或不可靠的，我们可以在JS上border。
如果两者，则子<ul>的{{1}}和ul {
display: inline-block;
padding: .2em .3em;
list-style: none;
border: 2px solid black;
}
li {
height: 0;
visibility: hidden;
}
li.current {
height: initial;
visibility: visible;
}可能不同，并且容器对于每个孩子来说，应该是宽和足够高，JS提供。
以下方法使用always rely获取<ul>
<li>a</li>
<li>abc</li>
<li>abcdefg</li>
<li>foo bar baz</li>
<li>i dunno lol</li>
<li class="current">42</li>
</ul>已呈现width元素的height和<li>，并设置width他们都读了。
父height的{{1}}和relative设置为子<li>的最大position: absolute和<ul>。
结果是width广泛且高度足以容纳每个孩子height，但所有孩子width编辑height; < / p>
<li><ul><li>
position和absolute 我想知道var widths = [], heights = [];
// loop through all the li elements
document.querySelectorAll( "li" ).forEach( function( v ) {
// get the computed styles for each li element
var ecs = window.getComputedStyle( v );
// push the width into the widths array
widths.push( ecs.width );
// push the height into the heights array
heights.push( ecs.height );
// set position:absolute on this li element
v.style.position = "absolute";
} );
document.querySelector( "ul" ).setAttribute( "style",
/* sort the widths array and pop the last (and therefore largest) value
then apply it to the width of the ul. */
"width:" + widths.sort().pop() +
/* sort the heights array and pop the last (and therefore largest) value
then apply it to the height of the ul. */
";height:" + heights.sort().pop()
);是否有用，并发现getComputedStyle链接到a CSS-tricks.com article，表明ul {
display: inline-block;
padding: .2em .3em;
list-style: none;
border: 2px solid black;
}
li {
visibility: hidden;
}
li.current {
visibility: visible;
}可以在<ul>
<li>a</li>
<li>abc</li>
<li>abcdefg<br>1234567</li>
<li>foo bar baz</li>
<li>i dunno lol</li>
<li class="current">42</li>
</ul>上使用display: flex 1}}几乎可以实现你所追求的目标。
我无法让它工作，并注意到他们自己的示例没有使用visibility: hidden或visibility: collapse！
他们正在操纵孩子的visiblity: collapse。
由于它是一个草案，这可能会成为一种可用的解决方案。
我不熟悉 flexboxes （深度羞耻）的使用，所以如果使用它们的解决方案存在，我们不会感到惊讶。我只是不知道（此时）知道它。
答案 2 :(得分：0)
为什么不这样做：
.second > li {
display: inline-block;
padding: 0px;
margin: 0px;
position: absolute;
border-top: 1px solid black;
border-bottom: 1px solid black;
padding: 1px;
left:0;
}
.second > li:first-child {
border-left: 1px solid black;
}
.second > li:last-child {
border-right: 1px solid black;
}<ul class="second">
<li>Item number 1</li>
<li>Item number 2 greater length</li>
</ul>
答案 3 :(得分：0)
首先，您应该将两个元素包含在您想要的容器div中，并将属性写为：
position: absolute;
top: 0;
left: 0;
并且，将容器位置属性设置为：
position: relative