html - 一起使用时的样式标签和复选框(附有 Plunker)

Question

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

请引用插件链接。按照这个，我希望我的复选框位于最左侧，并且值“数据:”始终位于最右侧。我的意思是，即使我们最大化，它也应该总是在极端而不是介于两者之间。

如果您还注意到，复选框和值“数据:”不在同一行。复选框有点在上侧，值“数据:”只是下侧。如何将它们对齐在同一行？

代码如下:

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

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

Answer 1

这里:

input {
  float: left;
}

.floated-label {
  float: right;
}

.rules {
 overflow: hidden;
}

<div class='rules'>
  <input type="checkbox" />
  <label class="floated-label">Data:</label>
</div>