我正在为我的大学课程制作一个网站,但我在幻灯片放映中获得按钮高度时遇到了问题。我想知道是否有人能给我一个线索,知道如何让他们两个都在同一高度?
这是幻灯片放映的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;
}
答案 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 */
}
然后,您可以在容器中添加填充,以便更精细地调整按钮与容器边缘的水平距离。