Question

我正在尝试实施时间表（在线记录给医生）。我的代码是：

<div class="container">
    <div class="record-container">
        <div class="time-container" style="padding-top:5px">
            <div class="time-table btn-group" data-toggle="buttons">
                <div class="time-table-row">
                    <div class="rec-time"><label class="btn btn-block free-time"><input type="radio">10:00</label></div>
                    <div class="rec-time"><label class="btn btn-block free-time"><input type="radio">11:00</label></div>
                    <div class="rec-time"><label class="btn btn-block free-time"><input type="radio">12:00</label></div>
                </div>
                <div class="time-table-row">
                    <div class="rec-time"><label class="btn btn-block free-time"><input type="radio">10:20</label></div>
                    <div class="rec-time"><label class="btn btn-block busy-time disabled"><input type="radio">11:20</label></div>
                    <div class="rec-time"><label class="btn btn-block busy-time disabled"><input type="radio">12:20</label></div>
                </div>
                <div class="time-table-row">
                    <div class="rec-time"><label class="btn btn-block free-time"><input type="radio">10:40</label></div>
                    <div class="rec-time"><label class="btn btn-block free-time"><input type="radio">11:40</label></div>
                    <div class="rec-time"><label class="btn btn-block free-time"><input type="radio">12:40</label></div>
                </div>
            </div><!--time-table-->
        </div> <!--time-container-->
    </div> <!--record-container-->
</div> <!--container-->

CSS：

.record-container {
  width: 100%;
  height: 440px;
 }
.time-container {
  margin-left: 240px;
  height: 240px;
}
.time-table {
  display: table;
  width: 100%;
  height: 100%;
}
.time-table-row {
  display: table-row;
}
.rec-time {
  display: table-cell;
  width: 11%;
  vertical-align: bottom;
  padding: 5px 5px;
  font-family: 'Roboto', sans-serif;
  color: #fff;
}
.btn {
  font-size: 16px;
  font-weight: 180;
  width: 82px;
}
.free-time {
  background: #5ece52;
}
.busy-time {
  background: #de0000;
}

第一个问题是按钮的外观。第二个是按钮不在组中。我发现这是因为<div class="rec-time">。我已经尝试了很多布局，但是我无法进入桌面，就像它现在一样，还有一组单选按钮（看起来像按钮）。

如何解决？

更新：第二个问题实际上是缺少name和id属性。至于按钮的外观，我必须向元素style="display:none"添加属性<input ...>以删除单选按钮的图标。但我无法理解为什么父元素（display: table-row;和display: table-cell;）的样式会如此影响？

Answer 1

正如Gav上面所说，单选按钮必须有ID和名称。您必须使用attibute＆＃39;为＆＃39;设置您的标签，该标签与单选按钮的ID匹配。

示例：

<input type="radio" id="radio-1" name="radios" value="A" />
<label for="radio-1">A</label>

<input type="radio" id="radio-2" name="radios" value="B" />
<label for="radio-2">B</label>

即使您的输入嵌套在标签内，您仍然需要每个输入的ID。 name属性可以是常见的。

Answer 2

此处的一个错误（与样式无关但与输入功能相关）是单选按钮没有名称属性或列出的值。为了注册他们需要拥有的任何活动。例如：

<input type="radio" name="bookingTime" value="10:00"/>

否则他们不会注册您的用户提交表单的任何结果，并且因为他们没有通用名称，用户当前可以选择任意数量的结果。然而，单选按钮的前提是一次只能选择一个 - 这是通过为所有按钮设置一个名称来实现的，因此选择不同的按钮实际上会改变与该输入名称相关联的值。

小组在桌里面的单选按钮

2 个答案: