为什么显示：内联不工作？

Question

我正在尝试创建一个简单的网页，其中文本字段和按钮处于水平位置我使用显示：内联它不起作用为什么这里是我的代码 http://plnkr.co/edit/G8mp53rQlF562hEkgmgT?p=preview

当用户滚动输入字段和按钮时，它们应该水平显示在图像

中

• 请忽略红色圆圈。我需要输入，按钮字段应该是水平的。

• 其次当用户单击右上角的菜单选项（“ - ”）时，打开菜单选项滚动文本.text来到菜单。文本应该在菜单下面

  var myApp = angular.module('myApp', ['ui.bootstrap', 'ionic']);
  //myApp.directive('myDirective', function() {});
  myApp.controller('MyCtrl', MyCtrl);
  function MyCtrl($scope, $http,$window) {
      $scope.back={
          height:$window.innerHeight+ "px"
  
      }
      $scope.obj={
          height:$window.innerHeight/2+$window.innerHeight/3+ "px",
          overflow:"auto" ,
          overflow:"scroll"
      }
      $http.get("menu.json").success(function (data) {
          $scope.menu = data;
      }).error(function () {
          alert('error')
      })
  }
  

Answer 1

对于与电子邮件地址输入字段位于同一行的按钮，问题是电子邮件输入字段的宽度是.email_row的整个宽度

尝试：

.email_row input {
  background: transparent;
  border: 3px solid #3C86D7;
  display: inline;
  padding: 1em;
  width: 80%;    <-- Add one line to CSS file
}

哎呀，菜单汉堡包图标似乎是一个离子/ angular.js的东西，而不是一个直接的bootstrap实现。并且Plunker Download缺少一些东西，所以我无法准确地表示我的localhost上发生了什么。抱歉。我会说它似乎在plunker中很好用（在Apple OS上使用开发工具的Chrome）

更新：哎呀。我现在明白了菜单的事情。我认为您只需要在部署模式下向菜单添加更高的Z-index排名。如果您不希望通过菜单看到滚动文本，则只需添加纯色背景颜色即可。我最喜欢的是使用.5不透明度的背景颜色。

#bs-example-navbar-collapse-1 .display_menu{
    z-index:  999;
    background-color:rgba(255,0,0,0.5); 
}