Html 向左浮动<；李>+；高度转换=问题_Html_Css_Html Lists_Css Transitions

Html 向左浮动<；李>+；高度转换=问题

html css

Html 向左浮动<；李>+；高度转换=问题,html,css,html-lists,css-transitions,Html,Css,Html Lists,Css Transitions,我正在应用一个过渡悬停效果，使放大问题是有一行的最后一个子项，当鼠标悬停在上面时，会将下一个2推到右边几个空格下面我能阻止这一切发生吗？我对使用转换有点陌生，一直在绞尽脑汁想看看这是否可以解决谢谢 CSS body { margin: 0; padding: 0; } #wrapper { width: 985px; min-height: 500px; margin: 0 auto; } ul #fourbox { list-style-type: none; } #fourbox

我正在应用一个过渡悬停效果，使

放大

问题是有一行的最后一个子项，当鼠标悬停在上面时，会将下一个2推到右边几个空格下面

我能阻止这一切发生吗？我对使用转换有点陌生，一直在绞尽脑汁想看看这是否可以解决

谢谢

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>




一,


二,


三,


四,


五,


六,


七,


八,

请参阅：

这里有一个解决方案：

使用

display:inline块

而不是

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;
}

#fourbox li{
宽度：188px；
高度：213像素；
利润率：15px 10px；
填充：15px；
背景#f1f2；
边框：1px实心#D1D2D4；
display:inline block；/*添加此查看它，您似乎试图将其保持为每行3个框，对吗？如果是这样，您只需在每组3个框之间使用一个clear:both
我在这里工作
您需要为元素提供更多的喘息空间，或者使用JS减少所有li的%（假设它们为50%s），然后在$（此）li上添加悬停效果，因此当您将鼠标悬停在一个li上时，您可以减少所有其他li，从而为其提供足够的增长空间
所以$（“li”）.hover（函数（）{
$（“li”）.css（'宽度'，'较小'）；
$（this.css（'width'，'larger'）；
})删除“float:left”并将“display:block”替换为“display:inline block”
小提琴：
希望这对你有用！
不要使用实际的宽度和高度，为什么不使用CSS转换呢！它们很整洁：）
或用于webkit
-webkit- transform:scale(1.1);

它不会影响正常的流程，而且很容易实现：）让我知道这是否适合你
演示
正文{
保证金：0；
填充：0；
}
#包装纸{
宽度：985px；
最小高度：500px；
保证金：0自动；
}
ul#fourbox{
列表样式类型：无；
显示：块；
}
#四盒李{
显示：内联块；
宽度：188px；
高度：213像素；
利润率：15px 10px；
填充：15px；
背景#f1f2；
边框：1px实心#D1D2D4；
盒影：0px 0px 0px#8888888；
过渡：所有0.5s缓解；
-webkit过渡：所有0.5s轻松；
}
#李：悬停{
宽度：198px；
高度：228px；
保证金：5px 5px；
盒影：0px 7px 10px#8888888；
}


一,


二,


三,


四,


五,


六,


七,


八,



。只做了一些更改，它的内联块工作正常。非常感谢大家！这是一个多么棒、速度多么快的社区！谢谢！我是这个网站的新手，所以我会这么做。
#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;
}

transform:scale(1.1);

-webkit- transform:scale(1.1);

        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>