jquery – 内部相对框内的绝对框内的css内联元素

我是网络开发的初学者,我正在构建我的第一个交互式网页.我遇到了一个具体问题,希望有人可以帮助我.这是我的第一个问题,所以如果我忘记提及或发布所有信息,我会提前道歉.并且sory为长代码:)(我试图删除一切无关的).

所以…我希望内联显示列(class =“column”),但它们在另一个下面显示一个.一个可能的问题可能与列在绝对定位框内的事实有关(class =“menu” – >变为class =“active”,当盘旋时 – 看看JavaScript！),它位于相对框内(class = “类别”).

我做了一个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
    }); 
});

解决方法

我不确定这是你所追求的,但看看这个 fork并看看它是不是你想要的.

具体来说,我将.column的宽度更改为最小宽度,并添加了display：inline to .column ul li

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

.column ul li { display: inline; }

或者,尝试在CSS中为.active类添加一个宽度为245px.

jquery – 内部相对框内的绝对框内的css内联元素

解决方法

相关推荐