如何在水平方向定义RadioListTitles？

const radioListTitles = [
  { id: 'option1', title: '选项1' },
  { id: 'option2', title: '选项2' },
  { id: 'option3', title: '选项3' },
  // 其他选项...
];

<div class="radio-list">
  <ul>
    <li><input type="radio" id="option1" name="options"><label for="option1">选项1</label></li>
    <li><input type="radio" id="option2" name="options"><label for="option2">选项2</label></li>
    <li><input type="radio" id="option3" name="options"><label for="option3">选项3</label></li>
    <!-- 其他选项... -->
  </ul>
</div>

.radio-list ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.radio-list li {
  display: inline-block;
  margin-right: 10px;
}

.radio-list input[type="radio"] {
  display: none;
}

.radio-list input[type="radio"] + label {
  cursor: pointer;
  padding: 5px 10px;
  border: 1px solid #ccc;
}

.radio-list input[type="radio"]:checked + label {
  background-color: #ccc;
}

const radioButtons = document.querySelectorAll('.radio-list input[type="radio"]');
radioButtons.forEach((radioButton) => {
  radioButton.addEventListener('change', (event) => {
    const selectedOption = event.target.value;
    // 执行相应的操作，例如更新UI或向服务器发送请求
  });
});