您可以将flex:0添加到input单选按钮，以避免此元素的增长：

input[type="radio"] {
  /* ... */
  flex: 0; /* Avoid input grows */
}

* {
  box-sizing: border-box;
}

body {
  background-color: #f1f1f1;
}

form {
  background-color: #ffffff;
  margin: 100px auto;
  font-family: Calibri;
  padding: 0px;
  width: 80%;
  min-width: 300px;
}

h1, h2, h3, h4 {
  text-align: center;
  font-family: Calibri, sans-serif;
}

input, select, textarea {
  padding: 10px;
  width: 100%;
  font-size: 17px;
  font-family: Calibri;
  border: 1px solid #aaaaaa;
  border-radius: 4px;
  box-sizing: border-box;
}

input.invalid {
  background-color: #ffdddd;
}

.content {
  display: none;
}

label {
  display: flex;
  align-items: center;
}

input[type="radio"] {
  margin-right: 5px;
  vertical-align: middle;
  order: 2; /* Added to change the order of radio buttons */
  flex: 0; /* Avoid input grows */
}

input[type=submit] {
  background-color: #04AA6D;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: #45a049;
}

.container {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}

/* Add the styled-box CSS class */
.styled-box {
  border: 1px solid #aaaaaa;
  padding: 10px;
  margin-bottom: 4px;
  border-radius: 1px;
  text-align: center; /* Center the content */
}

.custom-select {
  width: 200px;
}

/* Additional CSS code */
@media only screen and (max-width: 767px) {
  .styled-box label {
    display: block;
    margin-bottom: 10px;
  }

  .styled-box input[type="radio"] {
    display: block;
    margin-top: 5px;
    order: 1; /* Added to change the order of radio buttons */
  }

  /* Additional rule for datetime-local, date, and time inputs in mobile view */
  .styled-box input[type="datetime-local"],
  .styled-box input[type="date"],
  .styled-box input[type="time"] {
    background-color: white;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1023px) {
  form {
    width: 60%;
  }
}

<div class="styled-box">
      <h4>Select your Transfer Type:</h4>
      <label>
        <input
          type="radio"
          checked="checked"
          name="radio"
          id="rad1"
          value="TransferToAirportWithReturn"
          onclick="showContent('content1')"
        />
        Transfer To Airport With Return
      </label>
      <label>
        <input
          type="radio"
          name="radio"
          id="rad2"
          value="TransferToAirportOneWay"
          onclick="showContent('content2')"
        />
        Transfer To Airport One Way
      </label>
      <label>
        <input
          type="radio"
          name="radio"
          id="rad3"
          value="CollectionFromAirportOneWay"
          onclick="showContent('content3')"
        />
        Collection From Airport One Way
      </label>
      <label>
        <input
          type="radio"
          name="radio"
          id="rad4"
          value="CollectionFromAirportWithReturn"
          onclick="showContent('content4')"
        />
        Collection From Airport With Return
      </label>
    </div>

“单选按钮看起来都是倾斜的”的原因是因为input有width: 100%
为了达到所需的结果，我将label s和input s Package 在div中，并将其赋予width: fit-content; margin: auto;以使内容居中。
对于移动优先的方法，我使用了最小宽度媒体查询来给出label s flex-direction: row-reverse，而不是使用order。（移动优先更容易，更干净，因为你不需要推翻你的样式回到默认值。

body {
  background-color: #f1f1f1;
}

h4 {
  text-align: center;
  font-family: Calibri, sans-serif;
}

.wrapper {
  width: fit-content;
  margin: auto;
}

label {
  display: flex;
  column-gap: .5em;
  margin-bottom: 10px;

}

.styled-box {
  border: 1px solid #aaaaaa;
  padding: 10px;
  margin-bottom: 4px;
  border-radius: 1px;
}

@media (min-width: 768px) {
  label {
    flex-direction: row-reverse;
    justify-content: space-between;
  }
}

<div class="styled-box">
  <h4>Select your Transfer Type:</h4>
  <div class="wrapper">
  <label>
        <input
          type="radio"
          checked="checked"
          name="radio"
          id="rad1"
          value="TransferToAirportWithReturn"
          onclick="showContent('content1')"
        />
        Transfer To Airport With Return
      </label>
  <label>
        <input
          type="radio"
          name="radio"
          id="rad2"
          value="TransferToAirportOneWay"
          onclick="showContent('content2')"
        />
        Transfer To Airport One Way
      </label>
  <label>
        <input
          type="radio"
          name="radio"
          id="rad3"
          value="CollectionFromAirportOneWay"
          onclick="showContent('content3')"
        />
        Collection From Airport One Way
      </label>
  <label>
        <input
          type="radio"
          name="radio"
          id="rad4"
          value="CollectionFromAirportWithReturn"
          onclick="showContent('content4')"
        />
        Collection From Airport With Return
      </label>
  </div>
</div>