Question

我正在尝试通过将父div设置为以下内容并排显示4个div部分：

.parent {
    display: inline;
}

<div class="parent">
        <div class="child">
            <ul>
                <li>test1</li>
                <li>test1</li>
                <li>test1</li>
            </ul>
        </div>

        <div class="child">
            <ul>
                <li>test1</li>
                <li>test1</li>
                <li>test1</li>
            </ul>
        </div>

        <div class="child">
            <ul>
                <li>test1</li>
                <li>test1</li>
                <li>test1</li>
            </ul>
        </div>

4个div（嵌套了子元素）仍作为块元素堆叠：

test1
test1
test1
test1
test1
test1
test1
test1
test1

但是我希望它们并排在一起-test1 test1 test1

Answer 1

赞：

.parent .child {
    display: inline-block;
}

Answer 2

您可以使用CSS。

.parent {
  display: flex;
  flex-direction: row;
}

请使用此参考资料以获取更多详细信息：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 3

尝试一下：

.parent .child li {
    display: inline;
}

Answer 4

有很多选择。您可以尝试flexbox： https://www.w3schools.com/css/css3_flexbox.asp

.parent {
  display: flex;
  flex-wrap: wrap;
}

如何将多个div（及其子元素）显示为内联？

4 个答案: