如何使用css将按钮放置到右下角 [英] How do I position button to the bottom right using css

查看:357
本文介绍了如何使用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屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆