css 内联元素位于相对框内的绝对框内

Question

我是网络开发的初学者，正在构建我的第一个交互式网页。我遇到了一个具体问题，希望有人能帮助我。这是我的第一个问题，所以如果我忘记提及或 post 所有信息，我提前道歉。对于长代码感到抱歉 :)（我试图删除所有不相关的内容）。

所以...我想内联显示列 (class="column")，但它们显示一个在另一个下面。一个可能的问题可能与以下事实有关：列位于绝对定位框内（class="menu" -> 悬停时变为 class="active" - 查看 JavaScript!) 位于相对框内 (class="category").

我做了一个 JSFiddle：https://jsfiddle.net/Kokata/s5gjp8qz/3/

HTML:

<body>
    `<div id="filters">
        <h3>Categories</h3>
        <ul id="categories">
            <li class="category" id="one">
                <div class="menu">
                    <ul class="subcategories">
                        <li> Item 1 </li>
                        <li> Item 2 </li>
                        <li> Item 3 </li>
                    </ul>
                </div>
                <h4> Category 1 heading </h4>
            </li>
            <li class="category" id="two">
                <div class="menu">
                    <div class="column">
                        <h4> Column heading </h4>
                        <ul class="subcategories">
                            <li> Item 1 </li>
                            <li> Item 2 </li>
                            <li> Item 3 </li>
                        </ul>
                    </div>
                    <div class="column">
                        <h4> Second column </h4>
                        <ul class="subcategories">
                            <li> Item 1 </li>
                            <li> Item 2 </li>
                            <li> Item 3 </li>
                        </ul>
                    </div>
                </div>
                <h4> Category 2 heading </h4>
            </li>
        </ul>
    </div>`
</body>

CSS:

#filters {
    display: inline-block;
    float: left;}

h3 {
    width: 220px;
    background-color: black;
    color: white;
    padding: 3px 5px;
    margin: 0 0 2px 0;}

ul {
    list-style-type: none;
    padding: 0;
    margin: 2px 0;}

.category {
    position: relative;}

h4 {
    width: 220px;
    padding: 3px 5px;
    margin: 2px 0;}

.menu {
    display: none;}

.active {
    padding: 3px;
    border: 1px solid black;
    position: absolute;
    display: block;
    left: 230px;
    z-index: 10;}

.column {
    width: 120px;
    display: inline-block;
    vertical-align: top;}

JavaScript:

$(function(){

// OPEN AND CLOSE MENUS

$('.category').on('mouseover', function() {
    // When user moves over category...
    $(this).children('.menu').removeClass('menu').addClass('active');
    // remove class menu and add class active
});

$('.category').on('mouseout', function() {
    // When user moves down from category...
    $(this).children('.active').removeClass('active').addClass('menu');
    // remove class active and add class menu
    }); 
});

Answer 1

我不确定这是否是您想要的，但请查看此 fork 看看它是否是您想要的。

具体来说，我把.column的width改成min-width，把display: inline加到.column ul li

.column {
    min-width: 120px;
    display: inline-block;
    vertical-align: top;}

.column ul li { display: inline; }

或者，尝试在 css.

中将 width 添加到 .active class 中 245px

css 内联元素位于相对框内的绝对框内

css inline elements inside absolute box which is inside relative box

html

css

jquery

position