如何更改文本位置？

我有这样的代码：

// 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="[email protected]*" 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="[email protected]*" data-semver="1.3.6" src="https://code.angularjs.org/1.3.6/angular.js"></script> 
 
    <script data-require="[email protected]*" 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开关处于同一行。

像这样：

预先感谢您。

来源

2015-10-18 Michael

你想要'虚拟'的字或状态在右边？ –

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

来源

2015-10-18 10:53:20 Noppey

可以使用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; 
}

来源

2015-10-18 10:54:43

您可以设置display: inline-block到<h5>，因为<h5>的作用就像一个块级元素

// 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 */ 
 

 
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}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <link data-require="[email protected]*" 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="[email protected]*" data-semver="1.3.6" src="https://code.angularjs.org/1.3.6/angular.js"></script> 
 
    <script data-require="[email protected]*" 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>

来源

2015-10-18 10:55:44

，谢谢你的回答，但如果我在另一个地方使用

，我不想让它像块元素一样行事？ – Michael

您可以创建一个类来完成此操作，并将该类分配给您的H5标签。 – Noppey

如何更改文本位置？

回答

，我不想让它像块元素一样行事？ – Michael

相关问题