Question

我的文字有一些单选按钮。如何将所有这些内容居中，以便第一个按钮与最后一个INPUT的P的最后一个字母的“margin-right”相同？'margin-left'？

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

首先，您的标记无效。输入是无效元素，因此它们不能包含任何内容。

然后，为了进行居中，您可以尝试使用flexbox justify-content: center。

.someClass {
  display: flex;
  justify-content: center;
}

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

Answer 2

您可以使用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>

在CSS中使用相等的空间居中多个输入元素

2 个答案: