如何更改文本位置？

我有這樣的代碼：

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

相關問題