Question

我正在研究我的教程项目：

我有这段代码：

// Code goes here
angular.module('switchdemo', []).controller('DemoController', function($scope){
  
  $scope.init = function(){
    $scope.status = true;
  }
  

    $scope.changeStatus = function(){
    $scope.status = !$scope.status;
  }
})

/* Styles go here */

.active, .inactive {font-size:40px;cursor:pointer;}
.active, .inactive {font-size:40px;cursor:pointer;}
i.active { color: #5cb85c}
i.inactive {color: #d9534f}

<!DOCTYPE html>
<html>

<head>
  <link data-require="bootstrap@*" data-semver="3.2.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" />
    <link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />
  <script data-require="angular.js@*" data-semver="1.3.6" src="https://code.angularjs.org/1.3.6/angular.js"></script>
  <script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-app="switchdemo">

  <div ng-controller="DemoController" ng-init="init()">
    <div class="well">

      <i class="fa fa-toggle-on active" ng-if="status == true" ng-click="changeStatus();"></i>
      <i class="fa fa-toggle-on fa-rotate-180 inactive" ng-if="status == false" ng-click="changeStatus();"></i>
 <h5>dummy! </h5>
    </div>
    <pre>{{ status }}</pre>
  </div>
</body>

</html>

我怎么能做假的！与右边的ON / OFF开关在同一条线上的字。

像这样：

提前谢谢。

Answer 1

H5默认是一个块元素，这意味着它将在一个新行上。使用范围或将display: inline或display: inline-block分配给H5标记。

Answer 2

您可以使用左侧的float属性集，如下所示：

<div class="well">
    <div>
      <i class="fa fa-toggle-on active" ng-if="status == true" ng-click="changeStatus();"></i>
      <i class="fa fa-toggle-on fa-rotate-180 inactive" ng-if="status == false" ng-click="changeStatus();"></i>
   </div>
 <h5 class="align-left">dummy! </h5>

CSS：

.align-left {
    float: left;
}

Answer 3

您可以将display: inline-block设置为<h5>，因为<h5>就像一个块元素

＆＃13;

// Code goes here
angular.module('switchdemo', []).controller('DemoController', function($scope){
  
  $scope.init = function(){
    $scope.status = true;
  }
  

    $scope.changeStatus = function(){
    $scope.status = !$scope.status;
  }
})

＆＃13;

/* Styles go here */

h5{ display: inline-block;}
.active, .inactive {font-size:40px;cursor:pointer;}
.active, .inactive {font-size:40px;cursor:pointer;}
i.active { color: #5cb85c}
i.inactive {color: #d9534f}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <link data-require="bootstrap@*" data-semver="3.2.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" />
    <link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />
  <script data-require="angular.js@*" data-semver="1.3.6" src="https://code.angularjs.org/1.3.6/angular.js"></script>
  <script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-app="switchdemo">

  <div ng-controller="DemoController" ng-init="init()">
    <div class="well">

      <i class="fa fa-toggle-on active" ng-if="status == true" ng-click="changeStatus();"></i>
      <i class="fa fa-toggle-on fa-rotate-180 inactive" ng-if="status == false" ng-click="changeStatus();"></i>
 <h5>dummy! </h5>
    </div>
    <pre>{{ status }}</pre>
  </div>
</body>

</html>

＆＃13;

如何更改文字位置？

3 个答案: