javascript - 为什么显示:inline not working?

Question

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

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

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

• 其次，当用户单击右上角的菜单选项(“-”)时，它会打开菜单选项，滚动文本。文本位于菜单上方。文本应位于菜单下方

  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
}

哎哟，菜单汉堡包图标似乎是一个 ionic/angular.js 的东西，而不是直接的 Bootstrap 实现。而且 Plunker 下载缺少一些内容，因此我无法准确表示本地主机上发生的情况。对不起。我想说它似乎在 plunker 中运行得很好(在 Apple 操作系统上关闭了开发工具的 Chrome)

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

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