gpt4 book ai didi

css - 使用 CSS 在单独的框中显示父项和子项

转载 作者:太空宇宙 更新时间:2023-11-03 17:52:50 25 4
gpt4 key购买 nike

我的 HMTL 是:-

<div>1</div>
<div>1.1</div>
<div>1.2</div>
<div>1.2.1</div>
<div>2</div>
<div>2.1</div>
<div>2.2</div>
<div>2.2.1</div>
<div>3</div>
<div>4</div>

我想使用 CSS 在单独的框中显示我的输出(如逐行显示)。请参阅以下链接

http://jsfiddle.net/vtq3rzce/

谁能帮帮我?

谢谢,马尼什

最佳答案

如果您在嵌套的 div 周围包裹一个额外的 div,如下所示:

<div>
<div>1
<div>1.1
<div>1.2
<div>1.2.1</div>
</div>
</div>
</div>
<div>2
<div>2.1
<div>2.2
<div>2.2.1</div>
</div>
</div>
</div>
<div>3</div>
<div>4</div>
</div>

然后你可以做这样的事情让它看起来像你评论中的图片:

div {
width: 496px;
border: 2px solid #4072b4;
border-top: 0;
color: #fff;
text-align: center;
font-size: 120%;
background: #4679bd;
}

div div {
font-size: 100%;
width: auto;
border: 0;
border-top: 2px solid #4072b4;
line-height: 250%;
}

这是一个 fiddle :http://jsfiddle.net/Niffler/qpa8db7g/

(恐怕我不知道如何用元素之间的白色间距来做...)

关于css - 使用 CSS 在单独的框中显示父项和子项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26948151/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com