如何使用css将按钮放置到右下角 [英] How do I position button to the bottom right using css
本文介绍了如何使用css将按钮放置到右下角的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
当我试图将按钮放在左下角时,它工作,但当我去一个按钮,回去它有所有的按钮,但一个?另一个我需要向下滚动才能看到请帮助
When I tried to position the button to the bottom left, it worked but when I go to one of the buttons and go back it has all of the buttons there but one? the other one I need to scroll down to see please help
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;
}
ps 关于我们。
推荐答案
试试这个:
Try this:
.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>
不要在类声明中使用hashtag,这是不好的做法(用于捕获id的hashtag)。
Do not use hashtags inside a class declaretion, it's bad practice (hashtags used to catch id's).
这是为什么你的代码没有工作。
That's why your code did not worked.
回答如果有任何问题..
Reply if there are any issues..
这篇关于如何使用css将按钮放置到右下角的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文