我不知道该如何解释,但我想自动调整第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
.div {
border: 1px solid #666;
overflow: hidden;
display: table;
height: 30px;
width: 100px;
}
ul{
list-style:none;
}
HTML
<ul>
<li>
<div class="div">Item 1</div>
<ul>
<li>
<div class="div">Item 1.1</div>
</li>
<li>
<div class="div">Item 1.2</div>
</li>
<li>
<div class="div">Item 1.3</div>
</li>
<li>
<div class="div">Item 1.4</div>
</li>
</ul>
</li>
<li>
<div class="div">Item 2</div>
</li>
<li>
<div class="div">Item 3</div>
</li>
<li>
<div class="div">Item 4</div>
</li>
</ul>
答案 0 :(得分:1)
处理此问题的方法很多。在你的例子中,你并没有真正表达整体宽度,所以假设你想要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-->
当然,我使用内联样式来提高速度。您应该像我一样分配类,并将实际的CSS放在工作表中。我只是在这里向你们展示。请记住,当你向右移动一些东西时,它需要首先出现在html文档中,即content / div / etc以便于使用。
答案 1 :(得分:1)
认为小提琴只是一个近似的小提琴。但看看这个。 http://jsfiddle.net/nQvEW/138/
我所做的是,我已经将第一个li元素视为父类的父元素,并且我已将它们相对于主页面定位。
.parent {
position:relative;
}
其次,我考虑了父元素中的ul,并将其相对于父li(包含父li和子ul元素)定位,并适当地应用了left属性。
.parent ul{
position:relative;
left:20%;
}
第三,我将父元素中的div元素定位为相对于父元素是绝对的。你可以调整一下,最高百分比。这实际上很重要,因为父元素需要向下移动以保持子元素的边距。对于理想情况,顶部属性值应为50%。
.parent .div {
position:absolute;
top:40%;
}