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

我正在尝试制作一个简单的网页，其中文本字段和按钮处于水平位置，我使用了显示：内联它不起作用为什么我的代码在这里

当用户滚动一个输入字段和按钮时，它们应该水平显示，如图所示

• 请忽略红色圆圈。我需要输入和按钮字段应该是水平的
• 第二，当用户点击右上角的菜单选项（“-”）时，它会打开菜单选项，滚动文本。文本会出现在菜单上方。文本应该出现在菜单下方

  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')
      })
  }
  

---

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

尝试：

---

好的，但解决方案是什么呢？两个建议：学习CSS的特殊性（尽量不要使用！重要）以及使用Plunker解决CSS/JS问题的困难性。很难了解全局。我已经增加了z指数，但没有效果。请检查一下你那边

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

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