css - 在 CSS 中以等间距居中多个输入元素

Question

我有一些带有文本的单选按钮。我怎样才能将所有这些东西居中，以便第一个按钮与最后一个 INPUT 的 P 的最后一个字母的“margin-right”相同？

HTML

<div class='someClass'>
    <input type='radio' name='someName'>example
    <input type='radio' name='someName'>other text
</div>

CSS

.someClass{
    width:400px}

.someClass input{
    float:left}

Answer 1

您可以对元素使用 display: inline-block 将主题放在一行中，仍然为它们保留宽框模型属性，如边距、填充等:

.someClass{
  text-align: center;
}
.someClass .inputs{
  display: inline-block; 
}

<div class='someClass'>
    <p class="inputs"><input type='radio' name='someName'>example</p>
    <p class="inputs"><input type='radio' name='someName'>other text</p>
</div>