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

Question

这是我在 Stackoverflow 上的第一个问题，所以请客气:3 我遇到了一个网站问题，我无法在其中使 div 获得外部 li 高度。我无法直接链接该网站，因为您需要私有(private) 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 变成了椭圆形!当我悬停时，它给图像一个奇怪的椭圆形边框而不是一个完美的圆圈。有什么建议么？很抱歉缺少链接，但它在 VPN 网络中。

Answer 1

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

选项 1. 显示 <li>作为 block 元素，展开 <div>高度并添加更多的边界半径。尝试添加此属性:

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

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

选项 2. 绝对定位。这将拉伸(stretch) <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;
}