Question

我已经创建了并排的单选按钮，并试图将它们放在我的网页上，但是当我编辑边距大小时，其中一个按钮没有移动。我想将左按钮更向左移动。

我的 HTML 代码：

<div class="choice"
      <tr>
          <td><input type="radio" name = "dreg">I want to post my event</td>    
          <td><input type="radio" name = "dreg">I want to attend an event</td>
      </tr>
</div>

CSS 代码：

.choice {
  text-align: center;
  padding: 16px 100px;
  font-size: 150%
}

input[type="radio"]{
  margin: 40px 10px 100px 100px;
  cursor: pointer;

}

Answer 1

试试这个代码。如果这不是您想要的，请告诉我。

.choice {
  display: flex;
  padding: 16px ;
  font-size: 150%;
  justify-content: space-between;
}

input[type="radio"]{
  margin: 40px 10px 100px 0px;
  cursor: pointer;

}

<div class="choice">
      <tr>
          <div><td><input type="radio" name = "dreg">I want to post my event</td></div>

          <div><td><input type="radio" name = "dreg">I want to attend an event</td></div>

      </tr>
</div>

Answer 2

.choice {
  width: 100%;
  font-size: 150%
}
.choice ul{
  width: 100%;
  text-align: center;
}
.choice ul li{
  margin: 10px 10px 0px 0px;
  display: inline-block;
}
input[type="radio"]{
  margin-right: 10px;
  cursor: pointer;

}

<div class="choice">
    <ul>
      <li><input type="radio" name = "dreg">I want to post my event</li>
      <li><input type="radio" name = "dreg2">I want to attend an event</li>
    </ul>
</div>

如何在页面上并排居中单选按钮

2 个答案: