Как изменить расположение текста?

Я работаю на моем учебнике проекта:Как изменить расположение текста?

У меня есть этот код:

// 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 - это элемент блока по умолчанию, что означает, что он будет на новой строке. Используйте диапазон или назначьте 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

Смежные вопросы