Html 列表的父级和子级之间的宽度，以及垂直居中父级

我不知道该如何解释，但我想自动宽度项目1和2之间的区域（空间）。我不确定是ul还是li

我还想将项目1垂直定位到其子项的中心。我尝试了很多方法来处理CSS，但是我找不到一个好的解决方案。请提供帮助和建议

现在就像

-----                                                     -------
| P |              I want to be like this  ->             |  C  |
-----                                                     -------
     -----                                     -------    -------
     | C |                                     |  P  |    |  C  |
     -----                                     -------    -------
     -----                                                -------
     | C |                                                |  C  |
     -----                                                -------
     -----
     | C |
     -----  
                         the width of P will auto change

CSS

HTML

项目1


项目1.1


项目1.2


项目1.3


项目1.4




项目2


项目3


项目4

处理这个问题的方法很多。在您的示例中，您并没有真正表示总宽度，所以假设您希望P和C都在一起

<div class="containBoth" style="width:500px;">
  <div class="c" style="float:right;width:300px;">
    <ul>
    <li>c</li>
    <li>c</li>
  </ul>
 </div>

<div class="p" style="margin-right:20px">
    P 
</div>
</div><!-- close containBoth-->

c
c

P

---

当然，我使用内联样式来提高速度。您应该像我一样分配类，并将实际的css放在一个工作表中。我在这里做这两件事是为了给你看。请记住，当您将某些内容向右浮动时，它需要放在html文档的第一位，即content/div/etc，以便于操作。

认为小提琴只是一个近似的小提琴。但是看看这个

我所做的是，我认为第一个li元素是类parent的父元素，并将它们相对于主页进行了定位

.parent {
position:relative;
}

其次，我考虑了父元素中的ul，并将其相对于父li（包括父li和子ul元素）进行了定位，并适当地应用了left属性

.parent ul{
position:relative;
left:20%;
}

第三，我将div元素定位在父元素中，使其相对于父元素是绝对的。你可以稍微调整一下，最高百分比。这实际上很重要，因为父元素需要下移以保持与子元素的边距。对于理想情况，顶层属性值应为50%

.parent .div {
position:absolute;
top:40%;
}

---

​

您想只在单击时显示子元素，还是也要显示它们？我想全部显示。非常感谢。如果我将父对象和子对象划分为不同的div，视觉效果可能会得到改善。事实上，我可能不需要ul li来做这件事……但是我会在它们中加入很多功能，所以我想让它们像ul li一样保持连接……还有其他解决方案吗？非常感谢！虽然我需要花时间来理解代码，但我相信这就是答案！在CSS中有几种解决问题的方法。我想这是其中之一！

.parent ul{
position:relative;
left:20%;
}

.parent .div {
position:absolute;
top:40%;
}