如何將我的按鈕向右移動並使其響應。請任何人都可以幫助我？如何使按鈕響應？

這裏是我的代碼：

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

來源

2015-11-05 Prajwal K M

1）擺脫使用內嵌造型。改用外部CSS。 2）你有一個'width = 25％'的類型。它應該是'寬度：25％'。 – jbutler483

這是正確的...但我的按鈕正在移出圖像如何使其適合圖像？所以，即使我減少瀏覽器大小，它應該適合，在圖像內？ –

不要爲'top'聲明使用'px'值。改用'％'代替 – jbutler483

我得到了u想...基本上這裏就是我所做的

刪除了內聯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>

將背景圖像替換爲你擁有的任何圖像並且代碼將起作用。 Upvote我的答案，如果它幫助你。

來源

2015-11-05 17:34:53 Niraj

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

來源

2015-11-06 06:46:21

如何使按鈕響應？

回答

HTML

CSS

相關問題