按钮高度不匹配

时间:2018-04-07 23:10:54

标签: html css slideshow

我正在为我的大学课程制作一个网站,但我在幻灯片放映中获得按钮高度时遇到了问题。我想知道是否有人能给我一个线索,知道如何让他们两个都在同一高度?

这是幻灯片放映的css:

/ === SLIDESHOW SECTION === /

#container
{
    width: 90%;
    height: 700px;
    border: none;
    margin: 0 auto;
    position: relative;

}

#container > img
{
    width: 100%;
    height: 100%;
    position: absolute;
}

#container > .btn
{
    position: absolute;
    width: 50px;
    height: 50px;
    border: none;
    border-radius: 25px;
    top: 350px;
    background: #000000;
    color: #ffffff;
    font-size: 20px;
}

#container>#btn1:hover
{
    box-shadow: 10px 0px 20px 0px #343d46 ;
}
#container>#btn2:hover
{
    box-shadow: -10px 0px 20px 0px #343d46;
}

#container>#btn2
{
    position: relative;
    float: right;    
}

picture of the problem

3 个答案:

答案 0 :(得分:0)

尝试在#container>#btn2:

之前添加此内容
#container>#btn1
{
 position: relative;
 float: left;    
}

答案 1 :(得分:0)

change your

#container>#btn2
{
    position: relative;
    float: right;    
}  
to  
#container>#btn2
{
    right:0;    
}

答案 2 :(得分:0)

绝对定位通常不应用于类(多个元素)。

我会删除.btns上的绝对定位并在容器上使用flexbox,如下所示: -

#container
{
    width: 90%;
    height: 700px;
    border: none;
    margin: 0 auto;
    display: flex; /* adds flexbox to container */
    align-items: center; /* vertically aligns everything in container */
    justify-content: space-between; /* spaces the buttons as far away `enter code here`from each other as possible */
}

然后,您可以在容器中添加填充,以便更精细地调整按钮与容器边缘的水平距离。