向左浮动 <li> + 高度过渡 = 问题

我正在应用导致<li>放大的过渡悬停效果。

问题是每行的last child，当悬停在上面时，将接下来的 2 <li>推到右侧几个空格下方。

我有什么办法可以防止这种情况发生吗？我对使用过渡有点陌生，并且一直在绞尽脑汁试图看看是否可以解决这个问题。

谢谢！

.CSS

body {
margin: 0;
padding: 0;
}
#wrapper {
width: 985px;
min-height: 500px;
margin: 0 auto;
}
ul #fourbox {
list-style-type: none;
}
#fourbox li {
display: block;
width: 188px;
height: 213px;
margin: 15px 10px;
padding: 15px;
background: #F1F1F2;
border: 1px solid #D1D2D4;
float: left;
box-shadow: 0px 0px 0px #888888;
transition:all 0.5s ease;
-webkit-transition:all 0.5s ease;
}
#fourbox li:hover {
width: 198px;
height: 228px;
margin: 5px 5px;
box-shadow: 0px 7px 10px #888888;
}

.HTML

<body>
    <div id="wrapper">
        <ul id="fourbox">
        <li>
            <p>1</p>
        </li>
        <li>
            <p>2</p>
        </li>
        <li>
            <p>3</p>
        </li>   
        <li>
            <p>4</p>
        </li>
        <li>
            <p>5</p>
        </li>
        <li>
            <p>6</p>
        </li>
        <li>
            <p>7</p>
        </li>   
        <li>
            <p>8</p>
            </li>               
        </ul>
    </div>
</body>

参考： http://jsfiddle.net/aasthatuteja/mVrMH/

这是一个解决方案：

js小提琴在这里

使用display:inline-block而不是float:left

#fourbox li {
    width: 188px;
    height: 213px;
    margin: 15px 10px;
    padding: 15px;
    background: #F1F1F2;
    border: 1px solid #D1D2D4;
    display:inline-block;                     /* ADD THIS <<< */
    box-shadow: 0px 0px 0px #888888;
    transition:all 0.5s ease;
    -webkit-transition:all 0.5s ease;
}

或者，如果需要浮动

它们，也可以使用 clear:both。

这两种解决方案都有效。不过不错的小动画！

删除"float：left"并将"display：block"替换为"display：inline-block"...

#fourbox li {
    display: inline-block;
    width: 188px;
    height: 213px;
    margin: 15px 10px;
    padding: 15px;
    background: #F1F1F2;
    border: 1px solid #D1D2D4;
    box-shadow: 0px 0px 0px #888888;
    transition:all 0.5s ease;
    -webkit-transition:all 0.5s ease;
}

小提琴：http://jsfiddle.net/aasthatuteja/sAmxE/

希望对您有用！

        body {
            margin: 0;
            padding: 0;
        }
        #wrapper {
            width: 985px;
            min-height: 500px;
            margin: 0 auto;
        }
        ul #fourbox {
            list-style-type: none;
            display: block;
        }
        #fourbox li {
            display: inline-block;
            width: 188px;
            height: 213px;
            margin: 15px 10px;
            padding: 15px;
            background: #F1F1F2;
            border: 1px solid #D1D2D4;
            box-shadow: 0px 0px 0px #888888;
            transition:all 0.5s ease;
            -webkit-transition:all 0.5s ease;
        }
        #fourbox li:hover {
            width: 198px;
           height: 228px;
            margin: 5px 5px;
            box-shadow: 0px 7px 10px #888888;
        }
    </style>
</head>
<body>
    <div id="wrapper">
        <ul id="fourbox">
            <li>
                <p>1</p>
            </li>
            <li>
                <p>2</p>
            </li>
            <li>
                <p>3</p>
            </li>
            <li>
                <p>4</p>
            </li>
            <li>
                <p>5</p>
            </li>
            <li>
                <p>6</p>
            </li>
            <li>
                <p>7</p>
            </li>
            <li>
                <p>8</p>
            </li>
        </ul>
    </div>
</body> 
</html>

.只是做了一些更改，它的工作

看着它，看起来你试图把它保持在每行 3 个盒子，对吧？如果是这种情况，您可以简单地使用 clear：both;每组 3 之间。

在这里为我工作。 http://jsfiddle.net/Tzh8b/

<div style="clear:both;"></div>

您要么需要为元素提供更多的喘息空间来增加额外的空间，要么使用 JS 来减少所有 li 的 %（假设它们是 50%），然后在 $（this） li 上添加悬停效果，因此当您将鼠标悬停在 li 上时，您比减少所有其他 LI，从而为其增长留出足够的空间。

所以$("li").hover(function() { $("li").css('width','smaller'); $(this).css('width','larger'); });

与其使用实际的宽度和高度，为什么不使用CSS转换！它们很整洁:)

transform:scale(1.1);

或用于网络套件

-webkit- transform:scale(1.1);

它不会影响正常流程，并且易于实施:)让我知道这是否适合您！

演示

http://jsfiddle.net/eYCQq/

相关内容

最新更新

热门标签：