Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
618 views
in Technique[技术] by (71.8m points)

html - Buttons are not appearing at top right

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>
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

<h4> is block element as like div so it covers all width.

Wrap panel-heading div inside row and then provided 12 column calculation to that div

HTML

<div class="panel-heading row">
    <h4 class="col-xs-9">Panel header</h4>
    <div class="btn-group pull-right col-xs-3">
        <a href="#" class="btn btn-default btn-sm">## Lock</a>
        <a href="#" class="btn btn-default btn-sm">## Delete</a>
        <a href="#" class="btn btn-default btn-sm">## Move</a>
    </div>
</div>

Working solution with your code


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...