<button> mit <fieldset>

Guten Tag ausgerichtet,<button> mit <fieldset>

Ich versuche <button> relativ zu <fieldset>, auszurichten, aber ich schaffte es zu diesem Zeitpunkt nur bis es auszurichten mit margin:0 auto;

Kann man sagen, wenn es möglich ist, zu setzen <button> außerhalb der <fieldset> in der Mitte der rechten Seite, wie im Bild unten.

Vielen Dank für alle Vorschläge.

var app=angular.module('myApp',[]); 
 

 
app.controller('inspectionController', function ($scope, $http) { 
 
$scope.choiceSet = {choices: []}; 
 
    $scope.quest = {}; 
 

 
    $scope.choiceSet.choices = []; 
 
    $scope.addNewChoice = function() { 
 
     $scope.choiceSet.choices.push(''); 
 
    }; 
 

 
    $scope.removeChoice = function (z) { 
 
     var lastItem = $scope.choiceSet.choices.length - 1; 
 
     $scope.choiceSet.choices.splice(z,1); 
 
    }; 
 
    });

/* app css stylesheet */ 
 

 
    
 
textarea { 
 
    border:2px solid #9C9C9C; 
 
    display: block; 
 
    margin:auto; 
 
    position:relative; 
 
} 
 

 
textarea:focus { 
 
    outline: none !important; 
 
    border-color: #719ECE; 
 
    box-shadow: 0 0 10px #719ECE; 
 
    border:2px solid #00C4B0; 
 
} 
 

 
.btn-btn-info { 
 
    -webkit-border-radius: 9; 
 
    -moz-border-radius: 9; 
 
    border-radius: 9px; 
 
    font-family: Arial; 
 
    color: #ffffff; 
 
    font-size: 15px; 
 
    background: #2be632; 
 
    padding: 8px 12px 8px 12px; 
 
    text-decoration: none; 
 
    display:table; 
 
    margin: 0 auto; 
 
} 
 

 
.btn-btn-info:hover { 
 
    background: #74f278; 
 
    text-decoration: none; 
 
} 
 

 
.btn-btn-default-btn-sm { 
 
    -webkit-border-radius: 9; 
 
    -moz-border-radius: 9; 
 
    border-radius: 5px; 
 
    font-family: Arial; 
 
    color: #ffffff; 
 
    font-size: 12px; 
 
    background: #e62b2b; 
 
    padding: 3px 6px 3px 6px; 
 
    text-decoration: none; 
 
    display:table; 
 
    margin:0 auto; 
 
} 
 

 
.btn-btn-default-btn-sm:hover { 
 
    background: #e87474; 
 
    text-decoration: none; 
 
}

<!DOCTYPE html> 
 
<!--[if lt IE 7]>  <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> 
 
<!--[if IE 7]>   <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8"> <![endif]--> 
 
<!--[if IE 8]>   <html lang="en" ng-app="myApp" class="no-js lt-ie9"> <![endif]--> 
 
<!--[if gt IE 8]><!--> 
 
<html lang="en" ng-app="myApp" class="no-js"> <!--<![endif]--> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <title>Front-end developer task</title> 
 
    <meta name="description" content=""> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/normalize.css"> 
 
    <link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/main.css"> 
 
    <link rel="stylesheet" href="app.css"> 
 
    <script src="bower_components/html5-boilerplate/dist/js/vendor/modernizr-2.8.3.min.js"></script> 
 
    <script data-require="[email protected]" data-semver="1.4.9" src="https://code.angularjs.org/1.4.9/angular.min.js"></script> 
 
</head> 
 

 
<body ng-app="myApp" ng-controller="inspectionController"> 
 
    
 

 
    <!--[if lt IE 7]> 
 
     <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p> 
 
    <![endif]--> 
 

 

 
    <!-- In production use: 
 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script> 
 
    --> 
 
    <script src="bower_components/angular/angular.js"></script> 
 
    <script src="bower_components/angular-route/angular-route.js"></script> 
 
    <script src="app.js"></script> 
 
    
 
</br> 
 
    <div class="col-sm-10"> 
 
     <input type="button" class="btn-btn-info" ng-click="addNewChoice()" value="ADD USER"></br> 
 
     <div class="col-sm-4"> 
 
     <fieldset data-ng-repeat="field in choiceSet.choices track by $index"> 
 
     <button type="button" class="btn-btn-default-btn-sm" ng-click="removeChoice($index)">X</button> 
 
     <textarea class="input" rows="2" cols="30" placeholder="Describe User" ng-model=" choiceSet.choices[$index]"></textarea> </br> 
 
     </fieldset> 
 
     </div> 
 
    </div> 
 

 
</body> 
 
</html>

Quelle

2017-04-09 o.O

Legen Sie den Knopf nach dem Textbereich

Nehmen cs Styling wie dieser

textarea { 
    border: 2px solid #9C9C9C; 
    display: inline-block; 
    margin: auto; 
    position: relative; 
    vertical-align: middle; 
} 

button { 
    display: inline-block !important; 
} 

fieldset { 
    text-align: center; 
}

Snippet unten

var app = angular.module('myApp', []); 
 

 
app.controller('inspectionController', function($scope, $http) { 
 
    $scope.choiceSet = { 
 
    choices: [] 
 
    }; 
 
    $scope.quest = {}; 
 

 
    $scope.choiceSet.choices = []; 
 
    $scope.addNewChoice = function() { 
 
    $scope.choiceSet.choices.push(''); 
 
    }; 
 

 
    $scope.removeChoice = function(z) { 
 
    var lastItem = $scope.choiceSet.choices.length - 1; 
 
    $scope.choiceSet.choices.splice(z, 1); 
 
    }; 
 
});

/* app css stylesheet */ 
 

 
textarea { 
 
    border: 2px solid #9C9C9C; 
 
    display: inline-block; 
 
    margin: auto; 
 
    position: relative; 
 
    vertical-align: middle; 
 
} 
 

 
button { 
 
    display: inline-block !important; 
 
} 
 

 
fieldset { 
 
    text-align: center; 
 
} 
 

 
textarea:focus { 
 
    outline: none !important; 
 
    border-color: #719ECE; 
 
    box-shadow: 0 0 10px #719ECE; 
 
    border: 2px solid #00C4B0; 
 
} 
 

 
.btn-btn-info { 
 
    -webkit-border-radius: 9; 
 
    -moz-border-radius: 9; 
 
    border-radius: 9px; 
 
    font-family: Arial; 
 
    color: #ffffff; 
 
    font-size: 15px; 
 
    background: #2be632; 
 
    padding: 8px 12px 8px 12px; 
 
    text-decoration: none; 
 
    display: table; 
 
    margin: 0 auto; 
 
} 
 

 
.btn-btn-info:hover { 
 
    background: #74f278; 
 
    text-decoration: none; 
 
} 
 

 
.btn-btn-default-btn-sm { 
 
    -webkit-border-radius: 9; 
 
    -moz-border-radius: 9; 
 
    border-radius: 5px; 
 
    font-family: Arial; 
 
    color: #ffffff; 
 
    font-size: 12px; 
 
    background: #e62b2b; 
 
    padding: 3px 6px 3px 6px; 
 
    text-decoration: none; 
 
    display: table; 
 
    margin: 0 auto; 
 
} 
 

 
.btn-btn-default-btn-sm:hover { 
 
    background: #e87474; 
 
    text-decoration: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<!DOCTYPE html> 
 
<!--[if lt IE 7]>  <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> 
 
<!--[if IE 7]>   <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8"> <![endif]--> 
 
<!--[if IE 8]>   <html lang="en" ng-app="myApp" class="no-js lt-ie9"> <![endif]--> 
 
<!--[if gt IE 8]><!--> 
 
<html lang="en" ng-app="myApp" class="no-js"> 
 
<!--<![endif]--> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <title>Front-end developer task</title> 
 
    <meta name="description" content=""> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/normalize.css"> 
 
    <link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/main.css"> 
 
    <link rel="stylesheet" href="app.css"> 
 
    <script src="bower_components/html5-boilerplate/dist/js/vendor/modernizr-2.8.3.min.js"></script> 
 
    <script data-require="[email protected]" data-semver="1.4.9" src="https://code.angularjs.org/1.4.9/angular.min.js"></script> 
 
</head> 
 

 
<body ng-app="myApp" ng-controller="inspectionController"> 
 

 

 
    <!--[if lt IE 7]> 
 
     <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p> 
 
    <![endif]--> 
 

 

 
    <!-- In production use: 
 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script> 
 
    --> 
 
    <script src="bower_components/angular/angular.js"></script> 
 
    <script src="bower_components/angular-route/angular-route.js"></script> 
 
    <script src="app.js"></script> 
 

 
    </br> 
 
    <div class="col-sm-10"> 
 
    <input type="button" class="btn-btn-info" ng-click="addNewChoice()" value="ADD USER"></br> 
 
    <div class="col-sm-4"> 
 
     <fieldset data-ng-repeat="field in choiceSet.choices track by $index"> 
 

 
     <textarea class="input" rows="2" cols="30" placeholder="Describe User" ng-model=" choiceSet.choices[$index]"></textarea> <button type="button" class="btn-btn-default-btn-sm" ng-click="removeChoice($index)">X</button></br> 
 
     </fieldset> 
 
    </div> 
 
    </div> 
 

 
</body> 
 

 
</html>

Quelle

2017-04-09 20:34:36 repzero

<button> mit <fieldset>

Antwort

Verwandte Themen