Question

我正在设计表单，并且有一个单选按钮部分，用户可以在其中标识他们与大学的关系（学生，访客，供应商或其他）。由于某种原因，标签与单选按钮不对齐。这是what it looks like currently。

我已经研究了几个小时，并尝试了各种方法。我尝试将按钮和标签格式化为表格，以使按钮和标签位于一个表元素中，所有按钮均位于一行中。我尝试过手动更改标签的位置，以使其垂直对齐方式与按钮居中。我也尝试过使用vertical-align css属性并显示：inline-grid尝试解决此问题。另外，我的单选按钮没有显示，然后与CSS重叠以为它们着色以匹配表单。在上面的列表中，我也尝试删除了此文件，但仍然无法实现。另外，“ row”和“ bg”是用于设置边距和填充样式的类。

这是HTML：

 <div id="statusrow" class="row bg" style="width: 45%;">
      <div class="col-sm-3 color-text"><input id="vi" type="radio" value="Visitor" name="status"><label for="vi" style="font-weight:normal;">Visitor</label></div>
      <div class="col-sm-3 color-text"><input id="st" type="radio" value="Student" name="status"><label for="st" style="font-weight: normal;">Student</label></div>
      <div class="col-sm-3 color-text"><input id="ve" type="radio" value="Vendor" name="status"><label for="ve" style="font-weight: normal;">Vendor</label></div>
      <div class="col-sm-2 color-text"><input id="ot" type="radio" value="Other" name="status"><label for="ot" style="font-weight: normal;">Other</label></div>
    </div>

Answer 1

尝试这样的事情：

.color-text {
  text-align: center;
  width: 120px;
  display: inherit;
}
#statusrow{
  width: 100% !important;
  text-align: center;
  display: inline-block;
}
#statusrow input {
    text-align: center;
    display: block;
    margin: 0 auto;
}

<div id="statusrow" class="row bg" style="width: 45%;">
  <div class="col-sm-3 color-text"><input id="vi" type="radio" value="Visitor" name="status"><label for="vi" style="font-weight:normal;">Visitor</label></div>
  <div class="col-sm-3 color-text"><input id="st" type="radio" value="Student" name="status"><label for="st" style="font-weight: normal;">Student</label></div>
  <div class="col-sm-3 color-text"><input id="ve" type="radio" value="Vendor" name="status"><label for="ve" style="font-weight: normal;">Vendor</label></div>
  <div class="col-sm-2 color-text"><input id="ot" type="radio" value="Other" name="status"><label for="ot" style="font-weight: normal;">Other</label></div>
</div>

这是第二个版本：

.color-text {
  text-align: center;
  width: 120px;
  display: inherit;
}
#statusrow{
  width: 100% !important;
  text-align: center;
  display: inline-block;
}
#statusrow input {
    text-align: center;
    display: block;
    margin: 0 auto;
}
    
#statusrow label{
  margin-left: -65px;
  position: relative;
  top: -17px;
}

<div id="statusrow" class="row bg" style="width: 45%;">
  <div class="col-sm-3 color-text"><input id="vi" type="radio" value="Visitor" name="status"><label for="vi" style="font-weight:normal;">Visitor</label></div>
  <div class="col-sm-3 color-text"><input id="st" type="radio" value="Student" name="status"><label for="st" style="font-weight: normal;">Student</label></div>
  <div class="col-sm-3 color-text"><input id="ve" type="radio" value="Vendor" name="status"><label for="ve" style="font-weight: normal;">Vendor</label></div>
  <div class="col-sm-2 color-text"><input id="ot" type="radio" value="Other" name="status"><label for="ot" style="font-weight: normal;">Other</label></div>
</div>

Answer 2

感谢您的帮助！这就是对我有用的东西：

  <div id="statusrow" class="row bg" style="width: 55%;">
      <div class="col-sm-3 color-text"><label for="vi" style="font-weight: normal;">
        <input id="vi" type="radio" value="Visitor" name="status" style="vertical-align: baseline;">
        Visitor</label></div>
      <div class="col-sm-3 color-text"><label for="st" style="font-weight: normal;">
        <input id="st" type="radio" value="Student" name="status" style="vertical-align: baseline;">
        Student</label></div>
      <div class="col-sm-3 color-text"><label for="ve" style="font-weight: normal;">
        <input id="ve" type="radio" value="Vendor" name="status" style="vertical-align: baseline;">
        Vendor</label></div>
      <div class="col-sm-2 color-text"><label for="ot" style="font-weight: normal;">
        <input id="ot" type="radio" value="Other" name="status" style="vertical-align: baseline;">
        Other</label></div>
    </div>

Answer 3

您尝试过经典吗？

input[type="radio"] {
  margin-top: -1px;
  vertical-align: middle;
}

here完全可以与您共享的内容一起使用。如果这不起作用，则是其他一些CSS导致了问题。

Answer 4

<div id="statusrow" class="row bg" style="width: 45%;">
  <div class="col-sm-3 color-text"><label class="Radio" for="vi" style="font-weight:normal;"><input class="Radio-Input" id="vi" type="radio" value="Visitor" name="status">Visitor</label></div>
  <div class="col-sm-3 color-text"><label class="Radio" for="st" style="font-weight: normal;"><input class="Radio-Input" id="st" type="radio" value="Student" name="status">Student</label></div>
  <div class="col-sm-3 color-text"><label class="Radio" for="ve" style="font-weight: normal;"><input class="Radio-Input" id="ve" type="radio" value="Vendor" name="status">Vendor</label></div>
  <div class="col-sm-2 color-text"><label class="Radio" for="ot" style="font-weight: normal;"><input class="Radio-Input" id="ot" type="radio" value="Other" name="status">Other</label></div>
</div>


<style>
  .Radio {
    display: inline-flex;
    align-items: center;
  }

  .Radio-Input {
    margin: 0 0.5rem 0;
  }
</style>

请尝试以上更改，您将获得所需的设计.. !!!

如何对齐单选按钮及其标签？

4 个答案: