Question

http://plnkr.co/edit/a5RpkuWJFMfnOgoKr7pm?p=preview

请参阅plunker链接。因此，我希望我的复选框位于极左侧并且值为“数据：＆＃39;在任何时候都在极右侧。我的意思是，即使我们最大化，它也应该始终处于极端，而不是介于两者之间。

如果您还注意到，则复选框和值＆＃39;数据：＆＃39;不在同一条线上。复选框有点偏高，价值＆＃39;数据：＆＃39;只是较低的一面。如何在同一行中对齐它们？

以下是代码：

＆＃13;

.main_div {
  border: 1px solid red;
  width: 30%;
  margin: 50px;
  padding: 2px;
}

＆＃13;

<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.2.5.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<div ng-controller="ModalDemoCtrl">
  <div class='main_div'>
    <div>
      <div class='rules'>
        <span>
          <input type="checkbox" />
          <label>Data:</label>
        </span>
      </div>
    </div>
  </div>
</div>

＆＃13;

Answer 1

这里：

>>> for name in dct:
...     print(name, max(dct[name]))
...
('AMY', 10)
('BOB', 10)
('ANNA', 10)

Answer 2

flex可以在这里使用。

＆＃13;

.main_div {
  border: 1px solid red;
  width: 30%;
  margin: 50px;
  padding: 2px;
}
.rules span {
  display:flex;
  justify-content:space-between;
  }
/* reverse order ? label {
  order:-1;
  }
*/
input  {
  margin:auto 0;
  }

＆＃13;

<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.2.5.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<div ng-controller="ModalDemoCtrl">
  <div class='main_div'>
    <div>
      <div class='rules'>
        <span>
          <input type="checkbox" />
          <label>Data:</label>
        </span>
      </div>
    </div>
  </div>
</div>

＆＃13;

或float + text-align

＆＃13;

.main_div {
  border: 1px solid red;
  width: 30%;
  margin: 50px;
  padding: 2px;
}
.rules  {
  text-align:right;
  }

input  {
 float:left;
  }

＆＃13;

<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.2.5.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<div ng-controller="ModalDemoCtrl">
  <div class='main_div'>
    <div>
      <div class='rules'>
        <span>
          <input type="checkbox" />
          <label>Data:</label>
        </span>
      </div>
    </div>
  </div>
</div>

＆＃13;

样式标签和复选框一起使用（附带Plunker）

2 个答案: