Question

我的HTML是： -

<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/

任何人都可以帮助我吗？

谢谢，和Manish

Answer 1

您可以使用css表http://jsfiddle.net/vtq3rzce/1/

#a div {
color:green;
width:100%;
height:30px;
border:2px solid green;
display:table;
}

Answer 2

如果你在嵌套的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%;
}

这是一个小提琴：http://jsfiddle.net/Niffler/qpa8db7g/

（我担心我不知道如何用元素之间的白色间距来做...）

Answer 3

我不太确定您想要什么，但您可以更改display CSS属性。

http://jsfiddle.net/wd0tw53t/

我在这里所做的一切，都是在你的子节目的左边添加一个边距。

CSS：

div {
    display: block;
    border: 1px solid black;
}
div > div {
    margin-left: 20px;
}

使用CSS在单独的框中显示父级和子级

3 个答案:

http://jsfiddle.net/wd0tw53t/