如何将我的按钮向右移动并使其响应。请问有人可以帮我吗？
这是我的代码:
我在这里使用 CSS 中的背景图片
<!-- begin snippet: js hide: false -->
<!-- language: lang-html -->
<!-- Background image and Buttons -->
<div style="background-image:url('images/image.jpg'); padding-bottom: 30%;background-size: 100% 100%;" class="wrapper">
<div id="homebuttons" class="container">
<!-- Login with a button -->
<button style="top:170px; width:25%;" id="logintl" type="button" class="btn btn-info btn-lg sharp pull-right btn-group-vertical" title="Login with MiiSky" data-toggle="modal" data-target="#myModal"><span class="glyphicon glyphicon-lock"></span> | Login with SATMP</button>
<br>
<!-- Register with a button -->
<br>
<br><a href="register.html" style="top:200px; width:25%" id="registertl" title="Register with MiiSky" type="button" class="btn btn-info btn-lg sharp pull-right btn-group-vertical"><span class="glyphicon glyphicon-lock"></span> | Register with SATMP </a>
</div>
<!-- End homebuttons container-->
</div>
<!-- End Background image-->
我的按钮在右边，但没有响应。
当前输出:
按钮正在移出图像，如下图所示...
我想要适合图像，即使浏览器尺寸减小也不应该改变它。
任何想法都会有帮助
[1]: http://i.stack.imgur.com/F5Dty.jpg
[2]:http://i.stack.imgur.com/9uL7G.png
[3]:http://i.stack.imgur.com/ibhCa.png
最佳答案
我得到了你想要的。基本上，这就是我所做的。
- 从按钮和 anchor 标记中删除了内联 CSS 样式。
- 删除了宽度属性。
- 向按钮添加类 bt1 和 bt2。
- bt1 和 bt2 的样式分别为 top:100px 和 top:120px。您可以将像素更改为您想要的任何高度。
下面是我的工作代码。
<!DOCTYPE HTML>
<html>
<head>
<title>
About TechGenium
</title>
<!-- Font-Awesome CDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"></link>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<!-- begin snippet: js hide: false -->
<!-- language: lang-html -->
<!-- Background image and Buttons -->
<div style="background-image:url('images/bg_3.jpg'); padding-bottom: 30%;background-size: 100% 100%;" class="wrapper">
<div id="homebuttons" class="container">
<!-- Login with a button -->
<button id="logintl" type="button" class="bt1 btn btn-info btn-lg sharp pull-right btn-group-vertical" title="Login with MiiSky" data-toggle="modal" data-target="#myModal"><span class="glyphicon glyphicon-lock"></span> | Login with SATMP</button>
<br>
<!-- Register with a button -->
<br>
<br><a href="register.html" id="registertl" title="Register with MiiSky" type="button" class="bt2 btn btn-info btn-lg sharp pull-right btn-group-vertical"><span class="glyphicon glyphicon-lock"></span> | Register with SATMP </a>
</div>
<!-- End homebuttons container-->
</div>
<!-- End Background image-->
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>
<style>
.bt1{
top: 100px;
}
.bt2{
top: 120px;
}
</style>
</body>
</html>
将背景图片替换为您拥有的任何图片，代码将起作用。
关于css - 如何使按钮响应？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33541019/