Question

这是我在Stackoverflow上的第一个问题，所以要善良：3我有一个网站的问题，我无法设法让div获得外部li高度。我不能直接链接网站，因为你需要私人VPN访问，但我会尝试提供更多的信息。这是我正在处理的代码：

    #boxdocenti ul.elencodocenti li div {
    margin: 15px auto;
    border-radius: 50%;;
    max-width:90%;
    height: auto;
    /*background-color: #ff6319;*/
    transition: all 0.5s ease 0s;
}

#boxdocenti ul.elencodocenti li div img {
    max-width: 85%;
}

#boxdocenti ul.elencodocenti li div:hover {
    background-color: #ff6319;
}

圈子div里面有一个img，我不知道为什么但圆圈div变成了OVAL！当我进入悬停时，它给图像一个奇怪的椭圆形边框而不是一个完美的圆圈。有什么建议？抱歉没有链接，但它在VPN网络中。

Answer 1

我看不到更多相关的CSS和HTML，所以有一些选择。

选项1.将<li>显示为块元素，展开<div>高度并添加更多border-radius。尝试添加此属性：

#boxdocenti ul.elencodocenti li {
    display: block;
}

#boxdocenti ul.elencodocenti li div {
    height: 100%;
    border-radius: 100%;
}

选项2.绝对定位。这会将<div>拉伸到<li>边框。

#boxdocenti ul.elencodocenti li {
    display: block;
    position: relative;
    height: 200px; //fixed height
}

#boxdocenti ul.elencodocenti li div {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

Answer 2

使用你的css，将确定#boxdocenti ul.elencodocenti li div是圆形还是椭圆形是图像的高度。如果您的图像是正方形，则会生成一个圆。如果您的图像是矩形，它将产生一个椭圆形。你的div包含你图像的高度。

Answer 3

这是我能谈到的最接近的行为：的 Link to demo

你的代码有点缺乏，因为它只有CSS。然而你所描述的似乎是一个display:问题。

我认为发生了什么：默认情况下，您的元素是inline或inline-block元素，但是当您悬停显示属性更改时。

所以我认为添加（或删除）显示属性应该会有所帮助。

摘要

在悬停上添加display:inline-block;，使其保持其大小，而不是延伸到其父级的全长。

<div>不会适应外部<li>高度</li> </div>

3 个答案: