gpt4 book ai didi

css - 如何使用CSS将按钮定位到右下角

转载 作者:太空宇宙 更新时间:2023-11-04 10:41:45 26 4
gpt4 key购买 nike

当我尝试将按钮放在左下角时,它起作用了,但是当我转到其中一个按钮并返回时,它除了一个按钮之外还有所有按钮?另一个我需要向下滚动才能看到请帮忙

HTML

<!Doctype html>
<html>
<head>
<title>Forsaken </title>
<link href="main.css" rel="stlesheet" type="text/css">
</head>

<body>


<a href="teams.html"><button><img class="#topleft" src="icon1.jpg " width="100%" alt="Teams" ></button></a>
<a href="store.html"><button><img class="#topright" src="icon2.jpg " width="100%" alt="store" ></button></a>
<a href="sponsors.html"><button><img class="#bottomleft" src="icon4.jpg " width="100%" alt="sponsors" ></button></a>
<a href="aboutus.html"><button><img class="#bottomright" src="icon3.jpg " width="100%" alt="aboutus" ></button></a>


</body>


</html>

CSS

#topleft {
position: fixed;
top: 0px;
left: 0px;
}

#topright {
position: fixed;
top: 0px;
right: 0px;
}

#left {
position: fixed;
left: 0px;
}

#right {
position: fixed;
right: 0px;
}


div {
border-style:solid;
border-width:0px;
border-color:#000000;
}

#yes {
border: none;
padding: 0;
background: none;
}

.flat {
border: none;
background: #222;
color: #FFF;
padding: 0px 0px;
font-size: 22px;
font-family: Palatino;
font-weight: bold;
}

.lighter {
background: #666;
}

#no {
border: none;
padding: 0;
background: none;
}

.flat {
border: none;
background: #222;
color: #FFF;
padding: 0px 0px;
font-size: 22px;
font-family: Palatino;
font-weight: bold;
}

.lighter {
background: #666;
}

p.s 所有其他按钮都可以使用,但“关于我们”按钮除外。

最佳答案

试试这个:

.topLeft{
position: absolute;
top:0;
left:0;
}
.topRight{
position: absolute;
top:0;
right: 0;
}
.bottomLeft{
position: absolute;
bottom: 0;
left: 0;
}
.bottomRight{
position: absolute;
bottom: 0;
right:0;
}
<button class="topLeft"><a href="#">Click Me</a></button>
<button class="topRight"><a href="#">Click Me</a></button>
<button class="bottomLeft"><a href="#">Click Me</a></button>
<button class="bottomRight"><a href="#">Click Me</a></button>

Working Codepen

注意事项

不要在类声明中使用主题标签,这是不好的做法(主题标签用于捕获 id)。

这就是您的代码不起作用的原因。

如有任何问题请回复..

关于css - 如何使用CSS将按钮定位到右下角,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35740350/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com