跨度和按钮的标签标签等效于什么？答案

【问题标题】：What is the equivalent to the label tag for spans and buttons?跨度和按钮的标签标签等效于什么？
【发布时间】：2016-10-08 03:37:26
【问题描述】：

我有一些表单控件，我正在使用标签标签，但该行中还有 2 列不是输入表单，因此标签标签无法正常工作 - 一个静态标签字段和一个保存按钮.
这些值在标签旁边而不是在下面浮动。我可以使用什么替代方法？

JSfiddle

<div class="list-group list-group-large list-group-background list-group-background-data settings">
  <div class="list-group-header">
    <div class="list-group-title">
      <h3>Set Alerts</h3>
    </div>
  </div>
  <div class="list-group list-group-large list-group-data">
    <div class="row" ng-repeat="alarm in alarms">
      <div class="col-md-3">
        <label>Field</label>
        <select ng-model=alarms[$index].name class="form-control">
          <option ng-repeat="header in headers" value="{{header[0]}}">{{header[0]}}</option>
        </select>
      </div>
      <div class="col-md-2">
        <label>Condition</label>
        <select class="form-control" ng-model=alarms[$index].variant class="selectpicker">
          <option ng-selected="alarm.variant == 'gt'" value="gt">is greater than</option>
          <option ng-selected="alarm.variant == 'lt'" value="lt">is less than</option>
        </select>
      </div>
      <div class="col-md-2">
        <label>Threshold</label>
        <input ng-model=alarms[$index].threshold type="text" class="form-control threshold" value="{{alarm.threshold}}">
      </div>
      <div class="col-md-3">
        <label>Units</label>
        <span>deg</span>
      </div>
      <div class="col-md-2">
        <label>Save</label>
        <button type="button" ng-show="$last" ng-click="pushThreshold()" class="btn btn-success-outline">
        <i class="fa fa-check"></i>Save</button>
      </div>
    </div>
  </div>
</div>

【问题讨论】：

什么不起作用？
这些值浮动在标签旁边而不是下方。对不起，我会添加那个
为什么按钮需要标签？
label 元素应该有一个for 属性，其值为表单控件的id（或包装标签和表单元素），以便将两者链接起来以实现可访问性。见the guidance from the w3。

标签： html css angularjs twitter-bootstrap

【解决方案1】：

我建议你使用这个代码：

<div class="input-group">
     <span class="input-group-addon" id="contactField1" >Name</span>
     <input type="text" class="form-control" required="true" placeholder="write Name" aria-describedby="contactField1">
</div>

这将在输入组件的右侧添加一个带有“名称”的漂亮标签

【讨论】：

【解决方案2】：

我将<span> 标记更改为<div> 标记，并将按钮包裹在<div> 标记中，它起作用了。

【讨论】：