的HTML

Question

如何将我的按钮向右移动并使其响应。请有人帮我这个吗？

这是我的代码：

我在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

Answer 1

我得到了你想要的东西。基本上，这就是我所做的。

从按钮和锚标记中删除了内联CSS样式。
删除了width属性。
在按钮上添加了课程 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>

将背景图像替换为您拥有的任何图像，代码将起作用。

Answer 2

的HTML

以下是我的最终修改代码：

<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 sharp pull-right btn-group-vertical" 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" type="button" class="bt2 btn btn-info 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>

的CSS

在这里，我改变了按钮的宽度，因此它对我来说非常适合!!

    <style>
    .bt1{
        top: 50px;
        width:230px;
        color: black;

    }
    .bt2{
        top: 51px;
        width:230px;
        color: black;
    }
    </style>

    </body>

最终输出： image1 image2 image3

如何使按钮响应？

2 个答案:

的HTML

的CSS