<button>与<fieldset>对齐

时间：2017-04-09 20:24:40

标签： html css angularjs

美好的一天，

我正在尝试将<button>与<fieldset>相对齐，但到目前为止我只能将其与margin:0 auto;

对齐

请问是否可以将<button>放在右侧边框中央的<fieldset>之外，如下图所示。

非常感谢所有建议。

enter image description here 

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="angularjs@1.4" 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>

1 个答案:

答案 0 :(得分：0)

将按钮放在文本区域

之后

像这样应用cs样式

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

button {
  display: inline-block !important;
}

fieldset {
  text-align: center;
}

下面的代码段

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="angularjs@1.4" 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>

相关问题
最新问题