Question

我一直在尝试设计一个表单，但我的单选按钮和标签似乎没有对齐。我不知道我在哪里弄错了 CSS 我已经尽力了，但我不知道我做错了什么

<块引用>

这是表格 我有付款详细信息的地方就是问题所在。它们无法正确对齐

<form>
  <div class="input-group">
    <div class="input-box">
      <h4>Payment Details</h4>
      <input class='input-field' type="radio" name="pay" id="bc1" checked class="radio">
      <label for="bc1">
        <span>
          <i class="fa fa-cc-visa icon"> Credit card</i>
        </span>
      </label>
      <input class='input-field' type="radio" name="pay" id="bc2" class="radio">
      <label for="bc2">
        <span>
          <i class="fa fa-cc-paypal icon">paypal </i>
        </span>
      </label>
    </div>
  </div>

<块引用>

下面是我的 CSS 文件

body {
    font-family: 'Lato', sans-serif;
}

  .container {
    max-width: 1300px;
    margin: 0 auto;
    overflow: auto;
    padding: 0 40px;
}
.flex {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}
.grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 20px;
    justify-content: center;
    align-items: center;
    height: 100%;
}
.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 1rem;
  }

.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 1rem;
  }
  input {
    margin: 0.2rem 0;
  }

  /* End of Utility Styling */

.wrapper {
    max-width: 50%;
    margin: 40px auto;
    background: #efefef;
    padding: 60px 120px 80px 120px;
    text-align: center;
    -webkit-box-shadow: 2px 2px 3px rgba(0,0,0,0.1);
    box-shadow: 2px 2px 3px rgba(0,0,0,0.1);
}  

.wrapper > h2 {
    text-align: center;
    text-transform: uppercase;
    color: #047AED;
  }

  .input-group i {
    position: absolute;
  }
  .input-group {
    width: 100%;
    margin-bottom: 10px;
}
.icon {
    padding: 10px;
    min-width: 40px;
}
.input-field {
    width: 100%;
    padding: 10px;
    text-align: center;
}
input[type='text'],
input[type='email'],
input[type='password'],
input[type='date'],
input[type='submit'],
select,
textarea {
  
  padding: 0.4rem;
  font-size: 1.2rem;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-family: 'Lato', sans-serif;
}
form > h4 {
    text-align: center;
    margin: 20px;
    color: #047AED;
    font-size: 30px;
}

<块引用>

下面是它的样子的截图

Answer 1

不确定您要将单选按钮对齐的位置，但我试过了。

<form>
  <div class="input-group">
    <div class="input-box">
      <h4>Payment Details</h4>
      <div class="inputs">
        

      <div class="input-container">
              <input class='input-field' type="radio" name="pay" id="bc1" checked class="radio">
      <label for="bc1">
        <span>
          <i class="fa fa-cc-visa icon"> Credit card</i>
        </span>
      </label>
      </div>

        <div class="input-container">
      <input class='input-field' type="radio" name="pay" id="bc2" class="radio">
      <label for="bc2">
        <span>
          <i class="fa fa-cc-paypal icon">paypal </i>
        </span>
      </label>
      </div>
              </div>
    </div>
  </div>

body {
    font-family: 'Lato', sans-serif;
}

  .container {
    max-width: 1300px;
    margin: 0 auto;
    overflow: auto;
    padding: 0 40px;
}
.flex {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}
.grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 20px;
    justify-content: center;
    align-items: center;
    height: 100%;
}
.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 1rem;
  }

.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 1rem;
  }
  input {
    margin: 0.2rem 0;
  }

  /* End of Utility Styling */

.wrapper {
    max-width: 50%;
    margin: 40px auto;
    background: #efefef;
    padding: 60px 120px 80px 120px;
    text-align: center;
    -webkit-box-shadow: 2px 2px 3px rgba(0,0,0,0.1);
    box-shadow: 2px 2px 3px rgba(0,0,0,0.1);
}  

.wrapper > h2 {
    text-align: center;
    text-transform: uppercase;
    color: #047AED;
  }
/* 
  .input-group i {
    position: absolute;
  } */
  .input-group {
    width: 100%;
    margin-bottom: 10px;
}
.icon {
    padding: 10px;
    min-width: 40px;
}
.input-field {
/*     width: 100%; */
    padding: 10px;
    text-align: center;
}
input[type='text'],
input[type='email'],
input[type='password'],
input[type='date'],
input[type='submit'],
select,
textarea {
  
  padding: 0.4rem;
  font-size: 1.2rem;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-family: 'Lato', sans-serif;
}
form > h4 {
    text-align: center;
    margin: 20px;
    color: #047AED;
    font-size: 30px;
}
.inputs{
  display: flex;
  align-items: flex-start;
  flex-direction: column;
}

.input-container{
  display: flex;
  justify-content: center;
  align-items: center;
}

我如何在同一行上对齐我的单选按钮和标签按钮

1 个答案: