按钮不出现在右上角 [英] Buttons are not appearing at top right

问题描述

我只想在屏幕右上角显示我的按钮。我尝试了很多，Google也是如此。我也使用拉右标签，但无法弄清楚为什么他们没有出现在所需的位置。有帮助吗？以下是我的代码：

@ {ViewBag.Title =ListCams; Layout =〜/ Views / Shared / _Layout.cshtml; }<风格> div.scroll {overflow-y：hidden; overflow-x：hidden; }按钮{background-color：Transparent;背景重复：不重复; border：none;光标：指针;溢出：隐藏;概要：无; }< / style>< div class =panel panel-default> < div class =panel-heading> @ *< h1 style =color：＃F4981F; font-family：'Segoe Marker'> Cams List< / h1> * @< div class =scroll> < form action =/ Home / Redirect> < div class =btn-group pull-right> < button name =button1value =listtype =submitclass =buttonstyle =width：60px; height：58px; border：none> < img src =〜/ Images / List.pngwidth =53height =55/> button2< / button>& nbsp& nbsp& nbsp< button name =button1value =streamtype =submitclass =buttonstyle =width：60px; height：58px; border：none> < img src =〜/ Images / House.pngwidth =53height =55/> button2< / button>& nbsp& nbsp& nbsp< button name =button1value =settingtype =submitclass =buttonstyle =width：60px; height：58px; border：none> < img src =〜/ Images / Settings.pngwidth =53height =55/> button4< / button>& nbsp& nbsp& nbsp< h1 style =color：＃ F4981F; font-family：'Segoe标记'>凸轮列表< / h1> < / DIV> < /形式> < / DIV> < / div>< / div>

这个链接也在这里工作正常，但是当我运行我的应用程序时，它们出现在标题下方的左上角。

---

bootply link

解决方案 div>

添加这个css它会漂浮在右侧：

  .pull-right {
 float：右重要！; 
 margin-top：-66px; 
位置：绝对; 
 margin-left：293px; 
} 
  

工作小提琴： http://jsfiddle.net/cpf78jsg/1/

I just want to show my buttons at top right corner of the screen. I tried a lot to do so and Google it too. I also used tag of pull-right but unable to figure out why they are not appearing at the desired position. Any help? Here is my code:

@{ ViewBag.Title = "ListCams"; Layout = "~/Views/Shared/_Layout.cshtml"; }
<style>
  div.scroll {
    overflow-y: hidden;
    overflow-x: hidden;
  }
  button {
    background-color: Transparent;
    background-repeat: no-repeat;
    border: none;
    cursor: pointer;
    overflow: hidden;
    outline: none;
  }
</style>
<div class="panel panel-default">
  <div class="panel-heading">
    @*
    <h1 style="color:#F4981F; font-family:'Segoe Marker'">Cams List</h1>*@
    <div class="scroll">
      <form action="/Home/Redirect">
        <div class="btn-group pull-right">
          <button name="button1" value="list" type="submit" class="button" style="width:60px; height:58px; border:none">
            <img src="~/Images/List.png" width="53" height="55" />button2</button>&nbsp&nbsp&nbsp&nbsp
          <button name="button1" value="stream" type="submit" class="button" style="width:60px; height:58px; border:none">
            <img src="~/Images/House.png" width="53" height="55" />button2</button>&nbsp&nbsp&nbsp&nbsp
          <button name="button1" value="setting" type="submit" class="button" style="width:60px; height:58px; border:none">
            <img src="~/Images/Settings.png" width="53" height="55" />button4</button>&nbsp&nbsp&nbsp&nbsp
          <h1 style="color:#F4981F; font-family:'Segoe Marker'">Cams List</h1>
        </div>
      </form>
    </div>
  </div>
</div>

I have checked this link too and it is working fine here but when i run my app they are appearing at top left below the heading.

---

bootply link

解决方案

Add this css it will float on right side:

   .pull-right {
          float: right!important;
          margin-top: -66px;
          position: absolute;
          margin-left: 293px;
     }

Working fiddle:http://jsfiddle.net/cpf78jsg/1/

这篇关于按钮不出现在右上角的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！