Question

我有一个按钮应该保持不变或在所有视图中固定在相同的位置。但是当我添加一个视图时，它的标题位于按钮下方为什么？当我删除此 <button>Add</button> 时，它位于正确的位置（在页面的中间位置）。

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <link data-require="bootstrap-css@3.x" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js" data-semver="1.2.17" data-require="angular.js@1.2.17"></script>
    <script src="http://code.angularjs.org/1.2.17/angular-route.js" data-semver="1.2.17" data-require="angular-route@1.2.17"></script>
    <script data-require="ui-bootstrap@0.10.0" data-semver="0.10.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
    <link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/foundation/5.0.0/css/foundation.min.css" />
    <script src="script.js"></script>
    <script src="logincontroller.js"></script>
  </head>

  <body>
   <button>Add</button>
   <div id="main">
<div ng-view></div>
    <!-- angular templating -->
    <!-- this is where content will be injected -->

</div>
  </body>

</html>

Plunker http://plnkr.co/edit/j4i7omuhNyEIzAaYgmhv?p=preview

Answer 1

由于<h1>和<div>定义时它将显示为两行，除非您通过使用某些css覆盖

看看这个

<强> Working Demo

  <div class="container">
    <div class="div1">
      <button>Add</button>
    </div>
    <div class="div2">
      <div id="main">
        <div ng-view></div>
      </div>
    </div>
  </div>

Answer 2

h1-和button-elements都有css-property显示块。因此，它们将被置于彼此之下。 http://www.w3schools.com/cssref/pr_class_display.asp

当恒定或固定按钮添加时，为什么标题会降下来？

2 个答案: