CSS内联元素在相对定位盒子内的绝对定位盒子中。

Question

CSS内联元素在相对定位盒子内的绝对定位盒子中。

4

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

所以……我想要显示列（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
    }); 
});

- Rok Slavec

1

你的 .active div 太小了，你可以通过为其添加固定宽度来修复它：https://jsfiddle.net/s5gjp8qz/6/ - Mehdi Brillaud

谢谢您的回答，但我不想有固定的宽度，因为不同的 .active div 可以拥有从 0 到 7 个 .columns div。我希望使 .active div 的宽度取决于 .columns div 的数量。 - Rok Slavec

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Brett East · Accepted Answer

我不确定这是否符合您的要求，但请查看此fork，看看是否符合您的要求。

具体来说，我将.column的width更改为min-width，并在.column ul li中添加了display: inline。

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

.column ul li { display: inline; }

或者，尝试在CSS中将您的.active类添加一个宽度，比如245px。