为什么显示：内联不起作用？

Question

我正在尝试制作一个简单的网页，其中文本字段和按钮处于水平位置我使用 display:inline 它不起作用为什么这是我的代码 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
}

哎呀，菜单汉堡图标似乎是 ionic / angular.js 的东西，而不是直接的引导实现。而且 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); 
}