css - CSS 列中带有 的 未正确换行

Question

Lalalal，我快被 CSS 搞疯了...

我无法在这里实现最简单的布局，有些东西坏了。我想要 2 列彼此相邻:

[**** 300px ****][******** 500 px ********]

                  2nd column heading
Some text..       - 1st bullet point text
                  - 2nd bullet...
                  - 3rd...
                  -------------------------

我有这些 div:

<div class="faq_item">
        <div class="faq_link">
            <a href="">Video/screenshot coming soon.. </a>
        </div>
        <div>
            <strong>Q: How to add an item to a group? </strong>
            <ul>
            <li> Place your finger on one of the four icons at the bottom toolbar.</li>
            <li> Move your finger with the icon to drag it to the group to which you wish to add the item.</li>
            <li> Release your finger.</li>
            <li> Enter the price, adjust the quantity if needed, and press the 'return' button.</li>
            </ul>
        </div>
        <hr/>
    </div>

还有 CSS:

    .faq_item strong {
    display:block;
    margin-bottom: 10px;
}
.faq_item span {
    display: block;
}
.faq_item {
    margin:0 0 30px 50px;
}
.faq_item div {
    display:inline-block;
}
.faq_link {
    width:300px;
}
div.faq_item hr {
    width:500px;
    float:right;
    clear:left;
}

我的问题是当代码现在位于第一个 div 时，里面的第一个 div 位于第二个 div 的顶部。一旦我消除了最长的“li”标签，整个 div 就会正确对齐(里面的 2 个 div 彼此相邻)。我不明白为什么“li”不按正常方式换行，并且将 2 个 div 作为内联 block ，它们应该彼此相邻而不是垂直堆叠。

请指教。谢谢!

Answer 1

尝试将您的内容放在表格中。

它对我有用。